🖥 Обработка нажатия Caps Lock в JavaScript

Мне одному кажется, что Caps Lock — самая бесполезная клавиша? Вдобавок можно нажать её в самый неподходящий момент, скажем, при вводе пароля и не заметить. В идеале при написании JS добавить блок предупреждения пользователя о нажатии 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 позволяет получить множество сведений о клавиатуре пользователя во время событий, ориентированных на нажатие клавиш.
Полезная штука, используйте)

@javascriptv