Visualizador de Eventos de Teclado ｜ Inspecione key, code e keyCode online

Uma ferramenta online voltada para desenvolvedores front-end e engenheiros de software inspecionarem propriedades do objeto KeyboardEvent em tempo real. Capture o acionamento de teclas de forma visual e valide códigos para a construção de atalhos e manipulação de formulários web.

💡 Visão Geral da Ferramenta

• Inspeção instantânea da API KeyboardEvent Captura eventos keydown e exibe imediatamente o valor lógico da tecla (e.key), o código físico de hardware (e.code), o valor legado numérico (e.which) e a localização do acionamento (e.location).
• Monitoramento de teclas modificadoras (Modifiers) Identifica ativamente o estado booleano das teclas Shift, Ctrl, Alt e Meta (Windows/Command) durante cada disparo do evento.
• Log histórico de acionamentos Mantém um histórico tabular das últimas interações registradas no DOM, facilitando o debug de combinações complexas de teclas (hotkeys).
• Controle de e.preventDefault() Inclui um toggle para aplicar a prevenção de comportamento padrão nativo. Isso permite capturar e testar teclas restritas que normalmente acionariam funções do navegador (como F5, Ctrl+R ou Tab) sem recarregar ou perder o foco da página.
• Processamento 100% Client-Side Por se tratar de uma ferramenta de depuração e inspeção, nenhum dado de digitação (keystrokes), senhas ou informações pessoais são enviados para servidores externos. Todo o processamento ocorre exclusivamente no seu navegador.

🧐 Perguntas Frequentes

Q. Qual é a diferença técnica entre e.key e e.code?

A. A propriedade e.key retorna o valor lógico e final do caractere gerado, levando em consideração o layout do sistema operacional e o estado de modificadores (ex: pressionar a tecla "A" com o Shift ativado retorna "A", sem Shift retorna "a"). Já a propriedade e.code retorna a string que representa a posição física da tecla no teclado (ex: "KeyA"), permanecendo inalterada independentemente do idioma, layout configurado (QWERTY, Dvorak) ou uso de modificadores.

Q. Devo utilizar o valor exibido na propriedade e.which em meus projetos?

A. Não é recomendado. O valor numérico exibido em e.which (equivalente ao e.keyCode) é uma propriedade classificada como depreciada (legacy) pela especificação DOM Nível 3 e pela MDN Web Docs. Seu comportamento é inconsistente entre diferentes navegadores antigos e falha na correta identificação de caracteres especiais modernos. Utilize-o apenas para dar manutenção em bases de código antigas; para novos desenvolvimentos, adote os padrões e.key ou e.code.

📚 O padrão ABNT2 e os Eventos de Teclado

Para engenheiros e desenvolvedores web atuando no Brasil, o mapeamento de teclas apresenta particularidades devido à arquitetura do teclado ABNT2 (padrão oficial regulamentado no país).

Diferente do layout americano, o ABNT2 possui teclas físicas exclusivas. Ao inspecionar a tecla "Ç" (C-cedilha), por exemplo, o JavaScript moderno identificará corretamente o e.key como "ç", porém o mapeamento de hardware do e.code frequentemente retornará "IntlRo", "Semicolon" ou "Backquote", dependendo da variação do fabricante do periférico e do sistema operacional. O mesmo ocorre com a tecla de barra e interrogação (/ e ?) localizada ao lado do Shift direito, que costuma mapear fisicamente para "IntlRo".

Utilizar uma ferramenta de inspeção de eventos no navegador é essencial para garantir que a implementação de atalhos (shortcuts) em sistemas SaaS e aplicações React/Vue funcionem de forma resiliente para os usuários brasileiros, evitando conflitos lógicos causados por mapeamentos de código físico inconsistentes.