使用 JavaScript 检测大写锁定

任何人都有可能在不知不觉中随时打开大写锁定键。在大多数输入法中，用户都能轻易发现不需要的大写锁定，但在使用密码输入法时，问题就不那么明显了。这就导致用户输入的密码不正确，令人苦恼。理想情况下，开发人员可以让用户知道他们的大写锁定键已被激活。

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

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // Warn the user that their caps lock is on?
    }
});

我以前从未见过 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 提供了大量有关用户键盘的信息。真希望我在职业生涯的早期就知道 getModifier！