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
enter
o 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?
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ávelwidth
eoverflow: 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…