Teste de Teclas: Descubra o Código (KeyCode) de Cada Tecla

Teste de teclas online

Clique em Começar a capturar e pressione qualquer tecla: a ferramenta mostra event.key, event.code, keyCode, a localização, os modificadores ativos e um trecho de JavaScript pronto para copiar. Mais abaixo, um desenho do teclado ABNT2 (ou ANSI) marca cada tecla que funcionou. Nada do que você digita sai do seu navegador.

Como usar

1. Clique na área tracejada ou no botão Começar a capturar. A borda fica sólida enquanto a captura está ativa.
2. Pressione a tecla ou o atalho que quer inspecionar. Os campos se atualizam a cada tecla, e o histórico guarda as últimas 20.
3. Copie o trecho de código que serve ao seu caso.
4. Pressione Esc (ou clique fora da área) para devolver o teclado à página.

Durante a captura a ferramenta chama preventDefault() em tudo, inclusive Tab, F5 e Ctrl+S, para que essas teclas possam ser lidas em vez de executadas. Fora da captura, a página se comporta normalmente.

key, code e keyCode: qual é a diferença

Um evento keydown traz três informações que parecem a mesma coisa e não são.

event.key responde “o que o usuário quis digitar”. É a escolha certa para atalhos ligados a uma letra (Ctrl+S continua sendo a tecla marcada com S em qualquer layout) e para teclas com nome, como Enter, Escape, ArrowLeft e Backspace. O valor diferencia maiúsculas: sem Shift vem a, com Shift vem A. Por isso o trecho de atalho gerado aqui compara e.key.toLowerCase().

event.code responde “qual tecla física foi apertada”. Ele ignora o layout: a tecla à direita do L é Semicolon tanto num teclado americano (onde escreve ;) quanto num ABNT2 (onde escreve ç). Use-o quando a posição importa mais que a letra, como no WASD de um jogo, e para distinguir teclas que produzem o mesmo valor: ShiftLeft e ShiftRight, Enter e NumpadEnter, Digit1 e Numpad1.

event.keyCode e event.which são números, como 13 para Enter, 27 para Esc, 32 para espaço e 65 para a letra A. A especificação UI Events os mantém apenas por compatibilidade e os marca como legados: o valor depende do navegador, do sistema e do layout em várias teclas de pontuação. Em código novo, prefira key e code. A ferramenta mostra os dois números porque muito código antigo e muita documentação ainda dependem deles.

event.location completa o quadro: 0 para a posição padrão, 1 para a tecla da esquerda (Ctrl, Shift, Alt), 2 para a da direita e 3 para o teclado numérico.

Teclas mortas do ABNT2

No teclado brasileiro, os acentos são teclas mortas: agudo (´) e crase (`) dividem uma tecla, til (~) e circunflexo (^) dividem outra, e o trema (¨) sai com Shift+6. Ao pressioná-las nada aparece na tela; o sistema espera a próxima letra para montar á, à, ã ou â.

No keydown de uma tecla morta, event.key vale Dead, sem dizer qual acento foi. Para saber, olhe event.code (BracketLeft para a tecla do agudo, Quote para a do til). A letra seguinte normalmente já chega com o caractere acentuado em key, mas esse detalhe varia entre navegadores e sistemas. Se o seu código precisa do texto digitado, e não das teclas, leia o evento input do campo.

AltGr

O AltGr (o Alt da direita no ABNT2) dá acesso ao terceiro símbolo das teclas, como / em AltGr+Q e ? em AltGr+W. No Windows ele costuma chegar ao navegador como Ctrl e Alt pressionados juntos, por isso atalhos Ctrl+Alt+letra podem atrapalhar a digitação em alguns layouts. A ferramenta mostra o AltGr separado quando o navegador o informa.

Como achar uma tecla com defeito

Escolha o desenho ABNT2 ou ANSI, comece a capturar e pressione as teclas uma a uma. Cada tecla que gera evento fica verde; a que continuar branca não chegou ao navegador. Segure várias teclas ao mesmo tempo para ver o limite do seu teclado: modelos simples deixam de registrar certas combinações de três ou mais teclas (o chamado ghosting).

Uma tecla que não acende nem sempre está quebrada. Confira as limitações abaixo antes de concluir.

Limitações

• Atalhos reservados: Ctrl+W, Ctrl+T, Ctrl+N, Alt+F4, Alt+Tab, Ctrl+Alt+Del e as combinações com a tecla Windows (ou Command+Q e Command+Tab no Mac) são tratados pelo navegador ou pelo sistema antes da página. Nenhum site consegue bloqueá-los.
• Tecla Fn: é resolvida dentro do teclado e não gera evento. Teclas de mídia e de brilho podem ou não chegar ao navegador.
• Print Screen: em alguns sistemas só gera o evento de soltar a tecla; a ferramenta marca a tecla nesse momento.
• Celular e tablet: teclados virtuais quase sempre enviam key = Unidentified e keyCode = 229, porque o texto vem de um método de entrada (com correção e sugestões), não de teclas. Use o campo “Estou no celular” para ver o que o seu teclado envia.
• Desenho: é um teclado de tamanho completo. Em notebooks faltam o bloco numérico e algumas teclas de navegação.

Perguntas frequentes

Qual é o keyCode da tecla Enter? 13. O event.key é Enter e o event.code é Enter no teclado principal ou NumpadEnter no numérico.

Devo usar keyCode em código novo? Não. Use event.key para o significado da tecla e event.code para a posição física. keyCode e which são legados e inconsistentes em teclas de pontuação.

Por que a tecla Ç aparece como Semicolon? Porque event.code nomeia a posição pelo teclado americano, onde essa tecla é o ponto e vírgula. O valor digitado está em event.key.

Por que aparece “Unidentified” ou 229? É o que o navegador informa quando o texto vem de um método de entrada, como o teclado virtual do celular ou a composição de um acento. O caractere chega depois, pelo evento input.

O site grava o que eu digito? Não. Tudo roda no seu navegador, nada é enviado nem salvo, e a captura só acontece enquanto a área de teste está ativa.

Ferramentas relacionadas

• Teste de digitação: meça suas palavras por minuto.
• Tabela ASCII: códigos decimais e hexadecimais dos caracteres.
• Informações de caractere: código Unicode de qualquer símbolo.
• Analisador de User-Agent: navegador, sistema e aparelho.
• Testador de regex: teste expressões regulares.