event.getModifierState("CapsLock")是检测Caps Lock状态最直接标准的方法，适用于keydown、keyup等键盘事件及部分focus事件，需注意大小写敏感、浏览器兼容性及不可用于鼠标事件。
event.getModifierState("CapsLock") 是检测大写锁定键（Caps Lock）是否开启的最直接、标准的方法，适用于键盘事件（如 keydown、keyup、keypress）和部分焦点事件（如 focus）。
适用的事件类型
并非所有事件都携带可靠的修饰键状态。推荐在以下事件中调用：
- keydown / keyup：最常用，触发时能准确反映 Caps Lock 当前物理状态；
-
input 或 change（配合输入框）：适合在用户输入后检查，但需注意该事件本身不带
getModifierState，需结合最近一次键盘事件缓存状态； - focus：部分浏览器支持（如 Chrome、Firefox），可在获得焦点时立即检测，但 Safari 支持不稳定，慎用。
基础用法示例
监听 keydown 并实时判断：
document.addEventListener('keydown', (e) => {
const isCapsOn = e.getModifierState('CapsLock');
console.log('Caps Lock is', isCapsOn ? 'ON' : 'OFF');
});
注意：'CapsLock' 字符串大小写敏感，必须首字母大写、其余小写（不是 'capslock' 或 'CAPSLOCK'）。
兼容性与注意事项
- 现代浏览器（Chrome、Firefox、Edge、Safari 14.1+）均支持，旧版 Safari（≤14）可能返回
false即使 Caps Lock 开启； - 该方法检测的是系统级 Caps Lock 状态，与输入法或虚拟键盘无关；
- 不能在纯鼠标事件（如
click）中使用——这些事件对象没有修饰键状态上下文； - 若需在无键盘交互时（如页面加载后）获取状态，可触发一次不可见的
input元素聚焦 +keydown模拟，但存在限制，不推荐作为常规方案。
实用建议：为表单添加视觉提示
在密码输入框旁动态显示 Caps Lock 状态，提升用户体验：
const passwordInput = document.getElementById('password');
const capsWarning = document.getElementById('caps-warning');
passwordInput.addEventListener('keydown', (e) => {
const isOn = e.getModifierState('CapsLock');
capsWarning.textContent = isOn ? '⚠ Caps Lock is ON' : '';
capsWarning.style.display = isOn ? 'block' : 'none';
});
为防漏检，还可补充 keyup 事件做二次确认，避免某些快速连按场景下状态未及时更新。
