Detectar Caps Lock com JavaScript

Qualquer pessoa é capaz de ter a tecla caps lock ativada a qualquer momento sem perceber. Os usuários podem identificar facilmente o caps lock indesejado ao digitar a maioria das entradas, mas ao usar um password input, o problema não é tão óbvio. Isso faz com que a senha do usuário esteja incorreta, o que é um incômodo. O ideal seria que os desenvolvedores informassem ao usuário que a tecla caps lock está ativada.

Para detectar se um usuário tem a tecla caps lock ativada no teclado, usaremos KeyboardEvent‘s getModifierState method:

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?
    }
});

Eu nunca tinha visto o getModifierState usado antes, então explorei o Documentação do W3C para descobrir outros valores úteis:

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 fornece uma grande quantidade de informações sobre o teclado do usuário durante eventos centrados em teclas. Gostaria de ter conhecido o getModifier no início de minha carreira!