Que tecla estou apertando?
Aperte qualquer tecla e esta página mostra o event.key, o event.code e o keyCode legado. Por exemplo, a tecla A dá key "a", code "KeyA" e keyCode 65, e a tecla Enter dá code "Enter" e keyCode 13.
Como usar
- Clique em qualquer lugar da página e aperte uma tecla do teclado. Não precisa clicar em um campo de texto.
- Leia no painel o nome da tecla, o código físico e o keyCode legado. Segure Shift, Ctrl, Alt ou Cmd para ver as modificadoras e mantenha uma tecla apertada para ver o indicador de repetição ligar.
- Use Copiar para levar os valores ao seu código. A lista abaixo guarda as últimas dez teclas apertadas.
Como é calculado
Os navegadores enviam um evento keydown a cada tecla apertada. event.key é o valor que a tecla produz, como "a", "A" ou "Enter", e muda com o layout do teclado e com o Shift. event.code é a tecla física, como "KeyA", e permanece igual em qualquer layout, sendo a melhor escolha para controles de jogos.
event.keyCode é o antigo código numérico. Está obsoleto, mas continua em scripts velhos e em códigos da era do jQuery, por isso é exibido. Durante a composição por um método de entrada (IME) vale 229. event.location diz onde a tecla está: 0 padrão, 1 esquerda, 2 direita, 3 teclado numérico.
Para a página não rolar nem abrir a ajuda durante o teste, a ferramenta cancela a ação padrão do navegador na maioria das teclas. Tab, Escape, F5, F11, F12 e atalhos com Ctrl ou Cmd ficam como estão. Teclas tratadas pelo sistema operacional, como Fn, volume e brilho, nunca chegam à página.
Perguntas frequentes
Qual a diferença entre event.key e event.code?
event.key é o que a tecla digita, então depende do layout e do Shift. event.code é a posição física. Em um teclado francês AZERTY, a tecla na posição do Q tem code "KeyQ" e key "a". Use code para controles de jogo e key para atalhos que dependem de um caractere.
Ainda devo usar keyCode?
Não. keyCode e which estão obsoletos. Em código novo use event.key ou event.code. Os números aparecem para você ler ou corrigir scripts antigos, em que, por exemplo, 13 é Enter, 27 é Escape e 32 é Espaço.
Por que aparece 229 ou "Process"?
Os métodos de entrada para chinês, japonês, coreano e outros idiomas ficam com a tecla enquanto você compõe o texto, então o navegador informa 229. Troque para um layout em inglês se precisar dos valores diretos.
Por que meu atalho ou tecla de mídia não aparece?
O sistema operacional ou o navegador podem pegar a tecla antes de a página ver. Ctrl+W, Alt+Tab, Cmd+Q e a fileira Fn de muitos notebooks são exemplos. Se a página não reage, a tecla não chega ao código web.