用JavaScript检测大写锁定

任何人都有能力在任何给定的时间没有意识到他们的大写锁定键。在输入大多数输入时，用户很容易发现不必要的大写锁定，但是当使用 password   input 时，问题就不那么明显了。这会导致用户的密码不正确，这是一个烦恼。理想情况下，开发者可以让用户知道他们的大写锁定键被激活了。

为了检测用户是否打开了键盘的大写锁，我们将使用 KeyboardEvent ‘s  getModifierState 方法：

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // 警告用户他们的caps锁定是打开的？
    }
});

我以前从未见过使用 getModifierState ，所以我研究了W3C文档来发现其他有用的值：

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

getModifierState 在以键为中心的事件期间提供了关于用户键盘的丰富见解。