如何使用 JavaScript 检测 Caps Lock 是否打开？

通常，尤其是在创建密码输入时，您需要检查 Caps Lock 键是否打开并通知用户。您可以使用​​KeyboardEvent.getModifierState()​​​值为 的方法执行此操作​​'CapsLock'​​。这意味着您必须侦听元素上的键盘事件才能检查 Caps Lock 键的状态：

<form>
  <label for="username">Username:</label>
  <input id="username" name="username">

  <label for="password">Password:</label>
  <input id="password" name="password" type="password">
  <span id="password-message" style="display: none">Caps Lock is on</span>
</form>

const el = document.getElementById('password');
const msg = document.getElementById('password-message');

el.addEventListener('keyup', e => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none';
});

正如您从上面的示例中看到的那样，该​​'keyup'​​​事件用于我们选择的元素上，然后调用​​KeyboardEvent.getModifierState()​​​并确定​​'CapsLock'​​​键的状态。​​'keydown'​​​并且​​'keypress'​​​可能也有效。但是，在多台设备上进行测试后，似乎 using​​'keyup'​​是首选方法，因为它在不同的操作系统和浏览器上效果更好。