Qual é a tecla? (event.key e event.code)

Aperte qualquer tecla e esta ferramenta mostra o que o JavaScript recebe: event.key (o caractere ou o nome da tecla), event.code (a posição física no teclado), o antigo keyCode, o lado do teclado e os modificadores, como Ctrl e Shift. Serve para programar atalhos de teclado, jogos e para descobrir o nome de uma tecla.

Atualizado em · Por Leonardo Gaertner

Aperte uma tecla Clique aqui antes, se a página não estiver em foco.

Últimas teclas

    Tab continua mudando o foco, para não prender quem navega pelo teclado. No celular, o teclado virtual costuma informar só parte dos dados (muitas vezes key = "Unidentified").

    Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

    Como usar

    1. Clique na área de captura (ou só aperte uma tecla com a página em foco).
    2. Aperte a tecla ou a combinação que quer conferir.
    3. Copie o valor de event.key ou de event.code para usar no seu código.

    Como funciona

    O event.key diz o que a tecla produz, considerando o layout do teclado e o Shift: no teclado ABNT2, a tecla ç dá key "ç", e com Shift dá "Ç". O event.code diz qual tecla física foi apertada, sem levar o layout em conta: a mesma tecla ç tem code "Semicolon", porque fica onde o ponto e vírgula está no teclado americano.

    Use key para atalhos que dependem da letra, como Ctrl+S, e code para jogos e controles que dependem da posição, como WASD. O keyCode é numérico e obsoleto: varia entre navegadores e layouts e não deve ser usado em código novo, mas a ferramenta o mostra para quem mantém código antigo.

    Exemplo: a tecla ç no teclado ABNT2

    event.key: "ç"

    event.code: "Semicolon"

    event.keyCode: 186 (varia entre navegadores)

    Fonte: W3C: valores de KeyboardEvent.code

    Perguntas frequentes

    Como detectar Ctrl+S em JavaScript?

    Escute keydown e confira e.key.toLowerCase() === 's' e (e.ctrlKey || e.metaKey), para funcionar também com o ⌘ do Mac. Chame e.preventDefault() para o navegador não abrir a janela de salvar.

    Por que a tecla ç aparece como Semicolon?

    Porque o event.code segue a posição das teclas no teclado americano, onde fica o ponto e vírgula. É de propósito: assim um jogo que usa a posição das teclas funciona em qualquer layout.

    Por que no celular aparece Unidentified?

    Porque muitos teclados virtuais não informam a tecla no keydown, principalmente com corretor e sugestões ligados. Para campos de texto no celular, prefira o evento input, que informa o texto digitado.

    Outras ferramentas que podem ajudar

    Ver tudo em Front-end e design