本文介绍如何准确检测用户输入时 Caps Lock 键的开启状态，解决 keydown 事件导致的重复触发与状态误判问题，并推荐使用 keyup 事件配合 getModifierState('CapsLock') 实现稳定、跨浏览器的检测方案。
本文介绍如何准确检测用户输入时 caps lock 键的开启状态，解决 `keydown` 事件导致的重复触发与状态误判问题，并推荐使用 `keyup` 事件配合 `getmodifierstate('capslock')` 实现稳定、跨浏览器的检测方案。
在表单交互中，尤其是密码输入场景，向用户提示 Caps Lock 已开启是一项重要的可用性优化——避免因大小写误触导致的连续输错。虽然现代浏览器普遍支持 KeyboardEvent.getModifierState('CapsLock') API，但若错误绑定在 keydown 事件上，极易引发状态闪烁、日志重复、甚至逻辑反转等现象。
根本原因在于：keydown 事件在按键持续按下时会周期性重复触发（尤其在系统启用按键重复功能时），而 Caps Lock 的物理切换实际只发生在按键释放瞬间。因此，keydown 中读取的修饰键状态可能反映的是“切换前”或“中间态”，且多次触发导致 UI 频繁刷新，造成视觉抖动和日志污染。
✅ 正确做法是监听 keyup 事件：
<input type="password" id="passwordInput" placeholder="输入密码..."><div id="capsWarning" role="alert" style="color: #d32f2f; font-size: 0.875rem; margin-top: 4px;"></div> <div id="debugLog" style="font-family: monospace; font-size: 0.75rem; height: 100px; overflow-y: auto; background: #f5f5f5; padding: 4px; margin-top: 8px;"></div>
document.getElementById('passwordInput').addEventListener('keyup', function (ev) {
const isCapsOn = ev.getModifierState('CapsLock');
const warningEl = document.getElementById('capsWarning');
const logEl = document.getElementById('debugLog');
// 实时更新提示
warningEl.textContent = isCapsOn
? '⚠️ Caps Lock 已开启（密码可能为大写）'
: '';
// 追加调试日志（仅用于验证，生产环境建议移除）
logEl.textContent = `${new Date().toLocaleTimeString()} | CapsLock: ${isCapsOn}\n` + logEl.textContent;
});
? 关键要点说明：
- ✅
keyup保证每次 Caps Lock 切换后仅触发一次，状态真实可靠； - ✅
getModifierState('CapsLock')返回布尔值，无需兼容旧版keyCode或which； - ✅ 所有主流浏览器（Chrome、Firefox、Edge、Safari 16.4+）均支持该 API，兼容性良好；
- ⚠️ 避免在
input或keypress事件中检测——它们不携带完整的修饰键状态； - ⚠️ 不需额外过滤
isComposing或keyCode === 229（这是 IME 输入场景的处理，对 Caps Lock 检测无影响）； - ✅ 建议为提示区域添加
role="alert"，提升屏幕阅读器可访问性。
? 进阶提示： 若需在页面加载后立即显示当前 Caps Lock 状态（例如用户已开启 Caps Lock 后才聚焦输入框），可结合 focus 事件 + getModifierState 检查，或使用 document.addEventListener('visibilitychange') 动态同步。
通过将检测逻辑迁移至 keyup，即可彻底规避重复触发问题，实现简洁、健壮、无障碍友好的 Caps Lock 状态提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
