### [检测 Caps Lock 状态：keyup 更稳的原因](https://www.huociguo.com/article/1546)

**Published:** 2026-09-30T05:24:26

**Author:** 米了

**Excerpt:** 用 keydown 检测 Caps Lock 会出现状态滞后与重复触发。keyup 配合 getModifie…

在密码框提示大写锁定已开启，是输入体验里性价比很高的一处改进。写法上常见的问题是监听 keydown：事件在按键按下时触发，此时修饰键状态与实际生效状态可能不一致，还会在按住不放时反复触发。

![桌面上打开的笔记本电脑，用于说明输入框的键盘状态检测](https://api.huociguo.com/wp-content/uploads/2026/09/c9.jpg)

键盘状态应在按键抬起后读取，结果才与输入一致

## 推荐写法

```js
pwd.addEventListener('keyup', (event) => {
  const on = event.getModifierState('CapsLock');
  hint.hidden = !on;
});
```

`getModifierState` 由 KeyboardEvent 提供，返回修饰键的当前状态，跨浏览器一致，不需要读取 event.key 或判断字符大小写。

## 为什么不用 keydown 推断

-   keydown 触发时状态位尚未稳定，某些输入法与远程桌面环境下读到的值滞后一步；
-   长按会连续触发，提示文案反复闪烁；
-   由 event.key 的大小写推断会漏掉 Shift 组合，A 与 a 都无法可靠区分锁定状态。

## 三个注意点

1.  只在必要的字段上提示。密码框、验证码框这类区分大小写的输入值得加，普通文本框不需要。
2.  提示不阻断输入。用行内提示元素，不要用 alert 或禁用输入。
3.  无障碍与时机。提示节点加 `aria-live="polite"`，失焦时清除状态，避免提示残留在页面上。

## 边界

触屏设备与虚拟键盘不存在大写锁定概念，属性读取返回 false，提示不会误报。远程桌面与输入法场景下的首次读取可能不准，一次按键之后即为真实状态，属于可接受范围。

**Tags:** 事件监听, 修饰键状态, 表单交互, 输入提示, 键盘事件

**Categories:** HTML5

---