Buscador de Código de Tecla — keyCode, code, key Properties
Clique na zona de detecção e pressione qualquer tecla do teclado para revelar suas propriedades de eventos JavaScript: key, code, keyCode, which, charCode e estado dos modificadores (Ctrl, Alt, Shift, Meta). Todos os 17 valores são atualizados em tempo real. Perfeito para depurar manipuladores de eventos de teclado.
Clique aqui e pressione qualquer tecla
Como funciona
Eventos de teclado no JavaScript: key, code e keyCode
Quando um usuário pressiona uma tecla, o navegador dispara três eventos em sequência: keydown, keypress e keyup. Cada objeto de evento carrega diversas propriedades que identificam o que foi pressionado. As mais importantes são: key (o caractere ou tecla nomeada como 'Enter'), code (a localização física da tecla como 'KeyA' ou 'ArrowLeft') e keyCode (um inteiro legado, como 65 para 'A' independentemente do estado do Shift).
As propriedades keyCode e which estão obsoletas segundo a especificação W3C UI Events, mas ainda são amplamente utilizadas em bases de código antigas. Aplicações modernas devem preferir key para significado semântico (o que a tecla produz) e code para posição física (qual tecla física foi pressionada). Por exemplo, a tecla 'A' produz key='a' ou key='A' dependendo do Shift, mas sempre code='KeyA' independentemente do estado.
O atributo location em eventos de teclado
A propriedade location distingue teclas que existem em vários lugares do teclado: Ctrl esquerdo vs Ctrl direito, Shift esquerdo vs Shift direito, e teclas numéricas do teclado numérico vs dígitos da fileira superior. Os valores de location são: 0 (padrão), 1 (lado esquerdo), 2 (lado direito) e 3 (teclado numérico). Isso é particularmente útil para detectar se o usuário pressionou a tecla Enter do teclado numérico ou a tecla Enter principal.
As teclas modificadoras (Ctrl, Alt, Shift, Meta) são rastreadas como flags booleanos em todos os eventos de teclado, não apenas quando essas teclas são pressionadas sozinhas. Isso significa que você pode detectar combinações como Ctrl+C mesmo que esteja principalmente ouvindo pelo keyCode 67 (C). A tecla Meta corresponde à tecla Windows em teclados Windows e à tecla Command em Mac.
Casos de uso práticos para propriedades de eventos de teclado
Atalhos de teclado em aplicativos web usam uma combinação de code (tecla física) e flags modificadores para detectar combinações como Ctrl+S (salvar) ou Ctrl+Shift+P (paleta de comandos). Usar code em vez de key garante que o atalho funcione independentemente do locale do teclado: em um layout AZERTY francês, a tecla na posição 'A' produz um caractere diferente, mas code é sempre 'KeyA'.
Controles de jogos normalmente usam code para mapear WASD ou teclas de seta a movimentos, já que o que importa é a posição física e não o caractere produzido. Ferramentas de acessibilidade podem ouvir Tab (code='Tab') e Enter (code='Enter') para garantir que elementos interativos possam ser ativados sem mouse. Esta ferramenta permite verificar rapidamente os valores exatos de propriedades de qualquer tecla antes de escrever código de manipulador de eventos.
Perguntas frequentes
›Qual é a diferença entre keyCode e key?
keyCode é uma propriedade inteira obsoleta que atribui um número a cada tecla (por exemplo, 65 para 'A', 13 para Enter). key é o substituto moderno que retorna o caractere produzido ('a' ou 'A') ou uma string de tecla nomeada ('Enter', 'ArrowLeft'). Novos códigos devem usar key ou code em vez de keyCode.
›O que é a propriedade code?
code identifica a tecla física pressionada, independentemente do layout do teclado ou do estado dos modificadores. 'KeyA' sempre se refere à tecla na posição 'A' em um teclado QWERTY, mesmo que o usuário tenha mudado para um layout AZERTY onde essa tecla produz 'Q'. Use code para atalhos de teclado que devem funcionar independentemente do locale.
›Por que keyCode está obsoleto?
keyCode era inconsistente entre navegadores e sistemas operacionais, tinha valores diferentes para as mesmas teclas e não lidava bem com caracteres não ASCII. A especificação W3C UI Events o descontinuou em favor de key (para caractere/tecla nomeada) e code (para posição física). Tanto keyCode quanto which estão agora marcados como legados na especificação.
›O que o valor de location significa?
Location distingue teclas que aparecem em múltiplas posições. 0 = padrão (área principal), 1 = tecla modificadora esquerda (ex: Shift esquerdo), 2 = tecla modificadora direita (ex: Ctrl direito), 3 = teclado numérico. Isso permite distinguir o 5 do teclado numérico (code='Numpad5', location=3) do 5 da fileira superior (code='Digit5', location=0).
›Como detecto Ctrl+S ou outros atalhos no JavaScript?
Ouça o evento keydown e verifique tanto o key/code quanto os flags de modificadores: `if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveDocument(); }`. Usar e.key === 's' captura tanto maiúsculas quanto minúsculas, já que o estado do modificador não muda o valor de key para teclas de letras.
›O que é a propriedade charCode?
charCode era retornado pelo evento keypress legado e fornecia o ponto de código Unicode do caractere digitado (por exemplo, 65 para 'A'). Agora está obsoleto junto com o próprio evento keypress. Em eventos keydown/keyup, charCode é sempre 0. Use key ou inputType no evento input em vez disso.
›Como detecto a tecla Enter do teclado numérico vs o teclado principal?
Ambas as teclas produzem key='Enter', mas diferem em code: a tecla Enter principal é code='Enter' com location=0, enquanto a do teclado numérico é code='NumpadEnter' com location=3. Verifique e.code === 'Enter' para a tecla principal ou e.code === 'NumpadEnter' para a versão do teclado numérico.
›O que é a tecla Meta?
A tecla Meta é a tecla Windows em teclados Windows (⊞) e a tecla Command em teclados Mac (⌘). Em eventos de teclado, ela é rastreada pelo flag booleano metaKey e produz key='Meta' quando pressionada sozinha. Seu code é 'MetaLeft' ou 'MetaRight'.
Ferramentas relacionadas
Última atualização: