Keycode Checker

O Keycode Checker é uma ferramenta para desenvolvedores que permite verificar instantaneamente como as teclas pressionadas no navegador são reconhecidas como dados de eventos no JavaScript.

No desenvolvimento frontend, a detecção precisa de teclas é necessária ao implementar atalhos de teclado ou controles de jogos baseados na entrada do usuário. Com esta ferramenta, você pode obter propriedades de teclas como event.key, event.code e event.keyCode rapidamente e copiá-las com um único clique. Também é fácil testar o comportamento de diferentes layouts de teclado (como JIS vs US) e combinações com teclas modificadoras como Shift e Ctrl.

Você também pode verificar o histórico de entrada do teclado e testar com segurança a supressão de ações padrão do navegador (como a navegação com Tab ou rolagem com Space) diretamente no navegador, ativando e.preventDefault().

event.key

Representa o caractere ou função realmente inserida pelo usuário. Por exemplo, pressionar Shift + 1 num teclado US retorna ! como o event.key. É a propriedade mais recomendada para avaliar a entrada lógica.

event.code

Indica a posição física da tecla pressionada. Independentemente do layout de idioma do teclado, pressionar a tecla na posição 'A' sempre retornará KeyA. Isso é altamente útil para ações que dependem do layout físico, como o movimento WASD em jogos.

event.keyCode / event.which

Retorna um código numérico específico do sistema atribuído à tecla pressionada (por exemplo, 65 para A). Embora muito usadas no desenvolvimento JavaScript por muito tempo, elas agora estão obsoletas (deprecated). Devem ser usadas apenas para verificações de compatibilidade reversa.

event.location

Um número que indica a região física do teclado onde a tecla foi pressionada. Pode distinguir entre teclas padrão (0), modificadores esquerdos (1), modificadores direitos (2) e teclas do teclado numérico (3).

preventDefault()

Um método JavaScript usado para cancelar o comportamento padrão do navegador acionado por um evento, como rolar a página para baixo quando a tecla de Espaço é pressionada.

Q.Posso usar isso em um smartphone ou tablet?

Funciona corretamente se você tiver um teclado físico conectado. No entanto, com um teclado de software na tela, o evento keydown pode não ser acionado corretamente dependendo da implementação do sistema operacional ou do navegador, ou pode sempre retornar o mesmo keycode (por exemplo, 229). Esta ferramenta destina-se ao uso com teclados físicos.

Q.Devo usar event.key ou event.code?

Depende do seu caso de uso. Se você quiser avaliar o significado da tecla ou o caractere inserido (por exemplo, 'Pressione Enter para enviar'), use event.key. Por outro lado, se você quiser basear as ações na posição física do teclado (por exemplo, 'Mover o personagem com W, A, S, D'), usar event.code é a melhor prática.

Q.Posso evitar atalhos como F5 ou Ctrl+W?

Mesmo que você use o método e.preventDefault() do JavaScript, você pode não conseguir evitar completamente teclas de atalho poderosas reservadas no nível de segurança ou do sistema operacional/navegador, como fechar guias, recarregar janelas ou abrir as ferramentas de desenvolvedor do navegador.

Q.Por que event.keyCode está obsoleto (deprecated)?

Porque o valor numérico retornado pode variar dependendo do navegador, sistema operacional e layout do teclado, levando a problemas de compatibilidade. Atualmente é recomendado usar event.key ou event.code.

Q.Os dados das teclas inseridas são enviados a um servidor?

Não, não são enviados. Todo o processamento é concluído localmente usando JavaScript dentro do seu navegador, e o histórico de entrada de teclas nunca é enviado ou salvo em nenhum servidor externo.

Aqui estão os cenários de desenvolvimento típicos em que é necessário verificar keycodes.