Os Eventos de Chave do JavaScript são um caos — Aqui está a Referência de Código de Tecla que você vai salvar

Em algum momento da sua carreira em JavaScript, você se senta para lidar com uma tecla pressionada. Isso é simples. Abre o MDN e encontra não uma, nem duas, mas quatro propriedades diferentes que poderia usar: keyCode, which, keye, e codeTrês delas estão descontinuadas. Nenhuma delas concorda plenamente sobre o que é uma “tecla”. Parabéns — você chegou a uma das áreas mais historicamente caóticas da web.

Esta referência corta o ruído. Você aprenderá quais propriedades usar, quais evitar, e terá uma tabela completa de valores comuns de teclas para que não precise adivinhar.

As Quatro Propriedades — E Por Que Há Quatro

Os eventos de teclado em JavaScript expõem várias propriedades no objeto de evento. Aqui está o que cada uma realmente é:

Propriedade	O que retorna	Status
event.key	Uma string legível para humanos, como "Enter", "ArrowUp", ou "a"	✅ Use isso
event.code	O identificador físico da tecla, por exemplo, "KeyA", "Digit1", "ArrowLeft"	✅ Use isso para detecção independente de layout
event.keyCode	Um código numérico, por exemplo, 13 para Enter	⚠️ Descontinuado — evite em códigos novos
event.which	O mesmo valor numérico que keyCode	⚠️ Descontinuado — evite em códigos novos

keyCode e which são essencialmente a mesma coisa de épocas diferentes da história dos navegadores. Ambos retornam um inteiro representando a tecla. Ambos estão descontinuados. Ambos ainda funcionam em todos os navegadores, o que é a razão pela qual você continuará encontrando-os em códigobases que datam de antes de 2015.

Por que keyCode Descontinuado Mas Ainda Por Aí

keyCode era a forma original de detectar pressões de teclas no DOM do navegador, remontando aos modelos de eventos iniciais do Netscape. Funcionava — em grande parte — mas tinha sérias inconsistências: a mesma tecla poderia retornar códigos diferentes em navegadores diferentes, letras maiúsculas não eram tratadas de forma uniforme e teclas não-ASCII eram um caos.

O W3C formalmente descontinuou keyCode e which no especificação DOM Level 3 Events (2016) em favor de key e code. Mas a descontinuação significa "recomendamos que você pare de usá-la", não "vamos quebrar seu site". Os navegadores ainda a suportam e provavelmente a suportarão por um longo tempo.

O resultado: os bancos de código antigos estão repletos de event.keyCode === 13 verificações, respostas no Stack Overflow de 2012 recomendam isso e você encontrará isso em códigos em produção em todos os lugares. Não vai embora em breve — você só não deveria escrever códigos novos que o usem.

event.key vs event.code — Qual Uma Você Precisa?

Esta é a distinção que confunde a maioria das pessoas. Ambas são modernas e ambas estão corretas — elas respondem a perguntas diferentes.

• Use o event.key quando você se preocupa com o caractere que o usuário pretendia digitar. Em um teclado US, pressionar Shift + 2 dá você event.key === "@". Em um teclado alemão, a mesma tecla física dá um caractere diferente. event.key reflete o resultado lógico real.
• Use o event.code quando você se preocupa com qual tecla física foi pressionada, independentemente do layout. Isso é o que você quer para controles de jogos, atalhos de teclado que não devem mudar com a língua do usuário ou qualquer coisa onde “a tecla Q” significa a tecla de canto superior esquerdo — não o caractere Q.

Para a maioria dos casos práticos — submissões de formulários, fechamento de diálogos, atalhos rápidos — event.key é o que você quer. Para controles de jogos e atalhos baseados em posição, use event.code.

Tratamento Correto de Teclas em JavaScript Moderno

Aqui está como tratar casos comuns corretamente:

Tecla Enter (submissão de formulário, diálogos de confirmação)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Tecla Escape (fechar modais, cancelar ações)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Teclas de seta (navegação, sliders, controles de jogos)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

Teclas de modificadores (Ctrl+S, Cmd+K, etc.)

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Use o e.ctrlKey, e.shiftKey, e.altKeye, e e.metaKey (Cmd no Mac) para detectar combinações de modificadores. Essas não estão descontinuadas e funcionam exatamente como esperado.

Tabela Completa de Referência de Teclas

A tabela abaixo cobre as teclas que você usará com mais frequência. Para qualquer coisa não listada aqui, use a ferramenta Informações sobre Teclas — pressione qualquer tecla e obtenha imediatamente o valor exato event.key, event.codee os valores legados keyCode .

Tecla	event.key	event.code	keyCode (legacy)
Apresentamos	"Enter"	"Enter"	13
Escape	"Escape"	"Escape"	27
Espaço	" " (espaço)	"Space"	32
Aba	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Excluir	"Delete"	"Delete"	46
Arrow Up	"ArrowUp"	"ArrowUp"	38
Arrow Down	"ArrowDown"	"ArrowDown"	40
Arrow Left	"ArrowLeft"	"ArrowLeft"	37
Arrow Right	"ArrowRight"	"ArrowRight"	39
Lar	"Home"	"Home"	36
Fim	"End"	"End"	35
Page Up	"PageUp"	"PageUp"	33
Page Down	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift (left)	"Shift"	"ShiftLeft"	16
Ctrl (left)	"Control"	"ControlLeft"	17
Alt (left)	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
Caps Lock	"CapsLock"	"CapsLock"	20
a–z (lowercase)	"a"–"z"	"KeyA"–"KeyZ"	65–90
0–9 (top row)	"0"–"9"	"Digit0"–"Digit9"	48–57
0–9 (numpad)	"0"–"9"	"Numpad0"–"Numpad9"	96–105

A Tecla de Código que Você Não Consegue Lembre

Nenhuma tabela de referência cobre todas as teclas para todos os layouts de teclado. Quando você precisa dos valores exatos para uma tecla que não está certa — uma tecla de numérico, uma tecla de mídia, um caractere regional — a abordagem mais rápida é pressioná-la e ver.

O Informações sobre Teclas Faz exatamente isso. Pressione qualquer tecla e ele mostra imediatamente event.key, event.code, event.keyCodee, e event.which — além do estado de modificadores. Sem cópia e colagem do MDN, sem adivinhar o que "NumpadEnter" realmente se chama.

A Versão Curta

• Use o event.key para a maioria dos casos de tratamento de teclas — é legível, moderna e consciente do local.
• Use o event.code quando a posição física da tecla importa mais do que o caractere (controles de jogos, atalhos baseados em posição).
• Parar de escrever novos códigos que usam event.keyCode ou event.which. Eles funcionam, mas estão descontinuados e são menos previsíveis.
• Quando você encontrar código antigo usando keyCode === 13, significa Enter. keyCode === 27 significa Escape. A tabela acima tem o resto.
• Para uma tecla que não está listada em qualquer referência, pressione no Informações sobre Teclas e obtenha a resposta imediatamente.

Você também pode gostar