Detectar Caps Lock com JavaScript


Qualquer um é capaz de ter a tecla caps lock ativada a qualquer momento sem perceber. Os usuários podem facilmente detectar caps lock indesejados ao digitar na maioria das entradas, mas ao usar uma password entero problema não é tão óbvio. Isso faz com que a senha do usuário esteja incorreta, o que é um incômodo. Idealmente, os desenvolvedores poderiam deixar o usuário saber que sua tecla caps lock está ativada.

Para detectar se o Caps Lock do teclado de um usuário está ativado, empregaremos KeyboardEvent‘s getModifierState método:

doc.querySelector('enter(sort=password)').addEventListener('keyup', operate (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // Warn the person that their caps lock is on?
    }
});

Eu nunca tinha visto getModifierState usado antes, então eu explorei o Documentação 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 riqueza de informações sobre o teclado do usuário durante eventos centrados em teclas. Eu queria saber sobre getModifier no início da minha carreira!

  • API de visibilidade da página

    Um evento que sempre faltou no documento é um sinal para quando o usuário está olhando para uma determinada aba, ou outra aba. Quando o usuário sai do nosso web site para olhar para outra coisa? Quando ele volta?

  • Crie um efeito de logotipo Sheen com CSS
  • Desabilitar preenchimento automático, capitalização automática e correção automática

    Os fornecedores de navegadores móveis e de desktop fazem o melhor para nos ajudar a não parecermos idiotas, fornecendo recursos de preenchimento automático, correção automática e capitalização automática. Infelizmente, esses recursos às vezes podem atrapalhar; nem sempre queremos ou precisamos da ajuda que eles fornecem. Felizmente, a maioria dos navegadores permite…

  • CSS Reticências Início de String

    Fiquei incrivelmente feliz quando CSS text-overflow: ellipsis (casado com união estável width e overflow: hidden foi introduzido à especificação CSS e navegadores; o recurso nos permitiu parar de tentar casar o cálculo de largura do JavaScript com o cálculo de largura de string e truncamento. As reticências CSS também eram muito amigáveis ​​para…


Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *