使用 JavaScript 检测大写锁定键(Detect Caps Lock with JavaScript)（转）

原文地址：Detect Caps Lock with JavaScript - 使用 JavaScript 检测大写锁定

By David Walsh on February 6, 2024
作者：大卫·沃尔什，2024 年 2 月 6 日

Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn't so obvious. That leads to the user's password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated.

任何人都可以在任何给定时间打开大写锁定键，而自己却没有意识到。用户在输入大多数内容时可以轻松发现不需要的大写锁定，但在使用 password input 时，问题并不那么明显。这会导致用户的密码不正确，这很令人烦恼。理想情况下，开发人员可以让用户知道他们的大写锁定键已激活。

To detect if a user has their keyboard's caps lock turn on, we'll employ KeyboardEvent's getModifierState method:

要检测用户是否打开了键盘的大写锁定，我们将使用 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?
    }
});

I'd never seen `getModifierState` used before, so I explored the [W3C documentation](https://w3c.github.io/uievents/#event-modifier-initializers) to discover other useful values:

我以前从未见过使用 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 provides a wealth of insight as to the user's keyboard during key-centric events. I wish I had known about getModifier earlier in my career!

getModifierState 在以按键为中心的事件期间提供有关用户键盘的丰富见解。我希望我在职业生涯的早期就知道 getModifier ！