Mostra event.key, event.code, keyCode e event.location de qualquer tecla Estado de Ctrl, Shift, Alt e Meta, além da repetição Comando if em JavaScript pronto para copiar com a tecla pressionada Histórico das últimas teclas Impede a rolagem com Espaço e setas enquanto você testa

Testador de keycode JavaScript - event.key, event.code e keyCode

event.key, event.code e keyCode: qual a diferença

Cada tecla pressionada no navegador dispara um KeyboardEvent com várias propriedades. event.key é o valor que a tecla produz, como "a", "A", "Enter" ou "ArrowUp", e segue o layout do teclado e o estado do Shift. event.code descreve a tecla física, como "KeyA" ou "Digit1", então não muda entre teclados QWERTY, AZERTY ou Dvorak. keyCode e which são códigos numéricos antigos, obsoletos e inconsistentes entre navegadores e layouts. Código moderno deve usar event.key para texto e atalhos, e event.code quando a posição importa, como nos controles WASD de jogos.

Recursos

• Mostra event.key, event.code, keyCode e event.location de qualquer tecla
• Estado de Ctrl, Shift, Alt e Meta, além da repetição
• Comando if em JavaScript pronto para copiar com a tecla pressionada
• Histórico das últimas teclas
• Impede a rolagem com Espaço e setas enquanto você testa

Privado por padrão

Os eventos de teclado são lidos só nesta página, no seu navegador. Nada do que você pressiona é registrado ou enviado.

Sem keylogger, 100% no cliente.

Como usar: Testador de teclas

1
Clique em qualquer lugar da página para dar foco e pressione uma tecla. No celular, toque no campo para abrir o teclado da tela.
2
Leia o valor grande: event.key. Abaixo aparecem event.code e o antigo keyCode.
3
Veja nos cards a posição da tecla (Shift esquerdo ou direito, teclado numérico) e os modificadores pressionados, e copie qualquer valor com um clique.
4
Copie o comando if gerado para o seu handler de keydown. O histórico mostra as últimas teclas para comparar combinações.

Exemplos práticos

Atalhos de teclado

Para uma busca com Ctrl+K ou Cmd+K, pressione a combinação e use event.key === "k" com event.ctrlKey || event.metaKey, que funciona no Windows e no macOS.

Controles de jogos

Use event.code ("KeyW", "KeyA", "KeyS", "KeyD") para as teclas de movimento ficarem no mesmo lugar no AZERTY e em outros layouts, onde event.key seria "z" ou "q".

Enviar com Enter

Verifique event.key === "Enter" e !event.shiftKey num campo de chat para enviar com Enter e quebrar linha com Shift+Enter.

Teclado numérico e teclas de um lado

Diferencie o Enter do teclado numérico (location 3) do Enter principal, ou o Shift esquerdo do direito (location 1 e 2), quando o app precisar.

Perguntas frequentes

Uso event.key ou event.code?+

Use event.key para tudo que depende do caractere, como atalhos com letras, entrada de texto, Escape e Enter. Use event.code quando a posição física importa, como em jogos ou atalhos independentes do layout.

Por que o keyCode está obsoleto?+

Os valores de keyCode nunca foram padronizados: mudam entre navegadores, layouts de teclado e entre keydown e keypress. O padrão KeyboardEvent os substituiu por key e code, suportados por todos os navegadores modernos.

Por que o teclado do celular mostra "Unidentified" ou 229?+

Teclados de tela costumam enviar eventos de composição em vez de códigos reais, principalmente com autocorreção ou IME. No celular, ouça os eventos input ou beforeinput para pegar o texto.

Por que alguns atalhos não chegam à página?+

O navegador ou o sistema operacional tratam algumas combinações antes, como Ctrl+W, Ctrl+T, Cmd+Q ou Alt+Tab, então uma página não consegue capturá-las nem bloqueá-las.