Как при помощи JavaScript определить, включен ли Caps Lock

Перевод заметки «Detect Caps Lock with JavaScript».

Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.

Чтобы отслеживать, включен ли Caps Lock, мы используем метод getModifierState:

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // Предупредить пользователя, что caps lock включен?
    }
});

Я прежде никогда не встречал 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 в начале своей карьеры!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]