Keycode tester

Aperte qualquer tecla para ver exatamente o que o navegador informa no evento de teclado: o valor da tecla, o código físico, o keyCode legado, a location, os modificadores pressionados, as teclas de bloqueio e o indicador de repetição. Útil para desenvolvimento web, mapeamento de teclas e para identificar uma tecla desconhecida.

Pressione qualquer tecla. Inicie a captura completa para ver também Tab, Espaço, teclas F e atalhos (Esc duas vezes ou Parar para sair).

—
event.key
—
event.code
—
event.keyCode
—
event.location
—
Modificadores
—
Teclas de bloqueio ativas
—
event.repeat
—

event.keyCode e event.which estão obsoletos, mas os navegadores ainda os informam; use event.code para teclas físicas e event.key para o caractere produzido.

Registro de eventos (últimos 80)
typekeycodekeyCodelocationrepeatModificadores

Como usar o keycode tester

  1. Aperte qualquer tecla. A caixa grande mostra o valor da tecla, e os campos ao lado mostram event.key, event.code, event.keyCode, event.location, os modificadores pressionados, as teclas de bloqueio ativas e event.repeat.
  2. Aperte Iniciar captura completa para ver também teclas que o navegador normalmente usa para si, como Tab, Espaço, as teclas F e muitos atalhos. Aperte Esc duas vezes rapidamente, ou Parar, para sair.
  3. Abra o registro de eventos para ver os últimos 80 eventos keydown e keyup em ordem, por exemplo para conferir uma combinação de teclas.
  4. Aperte Copiar último evento (JSON) para colar os valores em um relatório de bug ou no código. Limpar registro esvazia a lista.

O que significa cada valor

  • key: o caractere ou nome de tecla produzido, depois do layout e dos modificadores. Shift+2 dá "@" em um layout americano e '"' em um layout britânico.
  • code: a tecla física, nomeada pela posição em um teclado QWERTY americano. Em um teclado francês AZERTY, a tecla com a letra A informa KeyQ. Use-o para controles de jogos e atalhos ligados à posição.
  • keyCode (e which no JSON): números legados, obsoletos, mas ainda informados. Eles variam entre layouts e navegadores; prefira key ou code em código novo.
  • location: 0 padrão, 1 esquerda, 2 direita, 3 numpad. Diferencia Shift, Ctrl, Alt e Meta esquerdo e direito, e as teclas do numpad da fileira de números.
  • Modificadores e teclas de bloqueio: Control, Shift, Alt e Meta pressionados durante o evento, e se Caps Lock, Num Lock ou Scroll Lock está ativo, conforme informado por getModifierState().
  • repeat: sim para eventos repetidos automaticamente enquanto uma tecla está pressionada.

Surpresas comuns

  • Dead: as teclas de acento de muitos layouts internacionais (como o ABNT2) não produzem caractere até a próxima tecla, então key é Dead.
  • Process ou keyCode 229: um método de entrada (por exemplo para chinês ou japonês, ou alguns teclados de celular) está compondo texto e a tecla real fica oculta.
  • AltGr no Windows normalmente chega como Control mais Alt, então você pode ver dois eventos e os dois modificadores.
  • Tecla Command do Mac: enquanto Command está pressionado, o navegador não informa quando outras teclas são soltas.
  • code vazio ou Unidentified: o teclado, o driver ou a sessão remota não forneceu uma tecla física. A tecla Fn nunca aparece, porque é tratada dentro do próprio teclado.

Limites

A página mostra o que o navegador expõe, depois que o sistema operacional e o layout do teclado processaram a tecla. Ela não mostra scan codes brutos nem dados USB HID, não vê teclas que o sistema operacional captura antes (como Ctrl+Alt+Del) e não altera nem remapeia teclas. Também não mede a latência nem o polling rate do teclado. Para verificar se todas as teclas de um teclado funcionam, use o teste de teclado; para várias teclas ao mesmo tempo, o teste de ghosting.

Perguntas frequentes

Qual é a diferença entre key e code?

code indica a posição física da tecla e continua igual qualquer que seja o layout. key é o que esse aperto produz com o layout e os modificadores atuais, por exemplo a, A ou @.

Ainda é seguro usar keyCode?

Os navegadores ainda o informam, mas ele está obsoleto e é inconsistente entre layouts e navegadores. Use event.key para caracteres e event.code para posições físicas.

O que eu digito é enviado para algum lugar?

Não. Os eventos só aparecem nesta página e somem quando você fecha a aba. Copiar o JSON o coloca apenas na sua própria área de transferência.

Testes relacionados

Guias