Visualizador Online de Código de Tecla. Inspetor de Código de Tecla

Ferramenta online gratuita para ver event.key, event.code, event.which e localização de qualquer tecla de teclado em tempo real. Gera snippets de código JavaScript prontos para usar.

Pressione uma tecla

Qualquer tecla do seu teclado para ver seu código

Estúdio de Utilitários

Quer este utilitário no seu site?

Personalize cores e o modo escuro para WordPress, Notion ou o seu próprio site.

Perguntas frequentes

Qual é a diferença entre event.key e event.code?

event.code representa a posição física da tecla no teclado, independentemente do idioma configurado. event.key representa o carácter gerado, que pode mudar se você pressionar Shift ou usar um idioma diferente. Use code para controles de jogos; use key para entrada de texto e atalhos semânticos.

O que é event.which e por que está deprecado?

event.which é uma propriedade herdada que retorna um código ASCII numérico para a tecla. É marcada como deprecada nos padrões modernos porque event.key e event.code a substituem por informações mais precisas e legíveis. É mostrada nesta ferramenta para fins educacionais.

O que significa a propriedade location?

A propriedade location indica onde a tecla está fisicamente localizada no teclado: Padrão (posição normal), Esquerda (tecla modificadora esquerda), Direita (tecla modificadora direita) ou Teclado Numérico (teclado numérico). É útil distinguir entre as teclas CTRL esquerda e direita, por exemplo.

Funciona com teclados internacionais e layouts não QWERTY?

Sim. A ferramenta mostra exatamente o que o navegador relata para sua configuração de teclado. event.code sempre retornará o nome QWERTY da posição física, enquanto event.key mostrará o carácter real de acordo com seu idioma.

# Compreendendo eventos de teclado em JavaScript

Quando um usuário pressiona uma tecla, o navegador dispara três eventos: keydown, keypress e keyup. Cada um expõe propriedades com informações sobre a tecla pressionada, mas nem todas são equivalentes ou recomendadas.

# Propriedades de eventos de tecla

event.code — A tecla física

Retorna o identificador da posição física da tecla no teclado, usando nomenclatura QWERTY. Por exemplo, a tecla "A" em um teclado AZERTY retorna KeyQ. Ideal para controles de jogos onde a posição importa, não o carácter.

event.key — O carácter gerado

Retorna o valor de carácter gerado de acordo com o idioma e modificadores ativos. Pressionar Shift+A retorna "A"; sem Shift retorna "a". Para teclas especiais, retorna nomes como "Enter", "Escape", "ArrowUp".

# Quando usar cada propriedade

Use event.code para controles de jogos (WASD independentemente do idioma) e event.key para detectar carácteres específicos ou atalhos de teclado semânticos como Ctrl+C.
As propriedades event.which e event.keyCode estão oficialmente deprecadas de acordo com o padrão W3C. Embora os navegadores modernos continuem a suportá-las para compatibilidade, elas não devem ser usadas em código novo.

Referências Bibliográficas