O que é uma ferramenta de informações de keycode?
Uma ferramenta de informações de keycode captura um evento de teclado no navegador e exibe os campos que desenvolvedores costumam inspecionar ao criar manipuladores de atalhos ou interações de acessibilidade. Esta implementação registra um keydown no botão de captura da página e mostra o valor de key, o code físico, o keyCode legado, a localização da tecla e os estados dos modificadores Ctrl, Alt, Shift e Meta. Ela é intencionalmente leve e, portanto, não registra eventos keyup, sequências de eventos, tempo de repetição nem detalhes de composição por IME.
Como usar a ferramenta de informações de keycode
- 1Clique na área de captura com o rótulo Click here, then press a key para dar foco do teclado ao botão.
- 2Pressione a tecla ou combinação de atalhos que deseja inspecionar e deixe a página capturar esse evento keydown.
- 3Consulte a área de saída do evento Key para ver key, code, keyCode, location e as flags de modificadores. Depois, repita o processo com outra tecla se precisar comparar os resultados.
Casos de uso comuns da inspeção de keycodes
Criação de atalhos de teclado
Confirme a combinação exata de tecla e modificadores recebida pelo aplicativo antes de implementar paletas de comandos, atalhos de editores ou teclas de navegação.
Comparação entre teclas físicas e lógicas
Confira como code e key diferem em layouts internacionais ou quando a mesma tecla física produz um caractere diferente do esperado.
Depuração do keyCode legado
Capture o valor antigo de keyCode junto aos campos modernos quando ainda precisar oferecer suporte a caminhos de código ou bibliotecas que dependem das APIs de teclado legadas.
Perguntas frequentes
Esta ferramenta registra tudo o que digito na página?
Não. Ela captura apenas o keydown enviado ao botão específico com foco depois que você clica nele, e os valores capturados permanecem localmente na página, sem serem enviados a um serviço remoto.
Por que key e code podem ser diferentes para a mesma tecla pressionada?
Em geral, key representa o caractere ou a ação lógica produzida pelo layout, enquanto code identifica a posição física da tecla. Ambos são úteis quando o comportamento de um atalho precisa funcionar mesmo com mudanças de layout.