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

通常情况下，特别是在创建密码输入时，您需要检查Caps Lock键是否打开并通知用户。您可以使用KeyboardEvent.getModifierState()方法并将其值设置为'CapsLock'来实现这一点。这意味着您必须在元素上监听键盘事件，以便检查Caps Lock键的状态：

<form>
  <label for="username">用户名：</label>
  <input id="username" name="username">

  <label for="password">密码：</label>
  <input id="password" name="password" type="password">
  <span id="password-message" style="display: none">Caps Lock已打开</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'也可能起作用。然而，在多个设备上进行测试后，似乎使用'keyup'是首选的方法，因为它在不同的操作系统和浏览器上的效果更好。