Visualizador de Código de Tecla (Keycode Finder para Desenvolvedores)
Identifique instantaneamente os valores de event.key, event.code e keyCode numérico de qualquer tecla com nosso visualizador online gratuito, seguro e com gerador de snippets para desenvolvedores web.
Pressione qualquer tecla
Clique em qualquer lugar desta área e pressione uma tecla do seu teclado físico para visualizar o código correspondente instantaneamente.
Histórico Sequencial
| Tecla (Key) | Código (Code) | Which | Modificadores |
|---|
Sobre os Códigos
Os padrões modernos do ecossistema Web priorizam event.key e event.code. A propriedade which (ou keyCode) encontra-se em estado depreciado nos manuais da W3C, mas continua implementada nos navegadores para fins de retrocompatibilidade com sistemas legados.
Tutoriais em vídeo de como usar esta ferramenta
O que é o Visualizador de Código de Tecla (Keycode Finder)?
O Visualizador de Código de Tecla é uma ferramenta essencial para engenheiros de software, desenvolvedores front-end e designers de interação que precisam capturar, mapear e debugar eventos de teclado em tempo real. Sempre que o usuário pressiona uma tecla, o navegador dispara um evento contendo uma série de metadados fundamentais para a criação de atalhos, navegação acessível ou jogos via browser.
Com esta aplicação, você obtém uma leitura instantânea e detalhada das propriedades modernas do DOM, como event.key e event.code, além da propriedade clássica (e atualmente depreciada) event.which ou keyCode. Tudo isso apresentado em uma interface interativa que já gera os trechos de código (snippets) prontos para uso em seus projetos.
Dica complementar: Se o seu objetivo não é programar, mas sim verificar o funcionamento físico das teclas ou se o seu hardware apresenta falhas simultâneas, recomendamos utilizar nosso Teste de Teclado Online ou realizar um diagnóstico mais profundo com o Teste de Teclado Fantasma (Keyboard Ghosting Test).
Como usar o Keycode Finder passo a passo
- Inicie a captura: Clique em qualquer lugar dentro da área pontilhada no topo da página. Em dispositivos móveis, um teclado virtual ou campo de interação será invocado.
- Pressione uma tecla: Digite qualquer tecla, número, símbolo ou atalho no seu teclado físico (ou virtual). O painel principal será atualizado em milissegundos.
- Analise os dados: Observe o número gigante que representa o identificador legado, enquanto os cards menores exibirão os valores literais (event.key) e físicos (event.code).
- Aproveite os Snippets: Navegue pelas abas JavaScript, Python ou Go para copiar a lógica de captura baseada na tecla que você acabou de pressionar.
- Histórico e Exportação: Verifique as teclas mapeadas anteriormente no painel de "Histórico Sequencial". Você pode exportar todo o fluxo para um arquivo JSON estruturado para análise posterior.
Para aqueles que trabalham ativamente manipulando retornos em JSON nas suas APIs, aproveite também o nosso Minificador de JSON ou o Gerador de Árvore JSON para visualizar a exportação gerada por esta ferramenta de forma mais limpa.
Privacidade e Segurança 100% Local
A sua privacidade é nossa prioridade absoluta. Este Visualizador de Código de Tecla funciona exclusivamente dentro do seu navegador (Client-side) utilizando Javascript nativo. Nenhuma tecla digitada, histórico de uso, log de atalhos ou arquivo JSON exportado é enviado para servidores externos. O processamento é imediato, efêmero e não armazena dados sensíveis, garantindo total segurança, inclusive para testes em ambientes corporativos restritos.
Principais Funcionalidades Integradas
-
Leitura Assíncrona de Propriedades Modernas: Extração perfeita de
event.key(o caractere gerado) eevent.code(a posição física da tecla no layout do teclado). -
Identificação de Teclas Modificadoras: Detecta perfeitamente concorrências complexas, acusando visualmente se você estava segurando Ctrl, Shift, Alt (Option) ou Meta (Comando/Windows) ao pressionar a tecla primária.
-
Bloqueio de Ações Nativas (Prevent Default): Uma chave que permite testar teclas que normalmente executariam ações no navegador (como F5 para atualizar ou Espaço para rolar a tela), bloqueando seu comportamento padrão para análise do código.
-
Geração de Snippets Multi-linguagem: Autocriação de blocos de código (If/Else) prontos para copiar, integrando o mapeamento exato em JavaScript (para Web), Python ou Go. Se for usar a versão JS, otimize o resultado de produção usando nosso Minificar JavaScript Online.
-
Histórico com Processamento em Lote: Acompanhe uma tabela contendo as últimas interações. É possível exportar a tabela inteira para JSON com um clique.
Perguntas Frequentes (FAQ)
Qual a diferença entre event.key e event.code?
O event.key representa o valor literal do caractere gerado pela tecla, levando em conta o idioma do sistema, uso do Shift ou CapsLock (ex: minúsculo "a" ou maiúsculo "A"). Já o event.code representa a posição estritamente física da tecla no teclado (ex: "KeyA"), ignorando qual idioma o teclado está configurado no sistema operacional.
Por que a propriedade event.which (keyCode) está depreciada?
A documentação oficial da W3C declarou o keyCode (e which) como depreciado porque ele entregava números inconsistentes e mágicos dependendo do navegador e do layout do teclado do usuário. Os padrões modernos (key e code) são muito mais semânticos, precisos e não requerem tabelas de tradução numéricas. Apesar disso, muitas aplicações legadas ainda o usam.
A ferramenta é capaz de identificar atalhos combinados?
Sim! Nosso visualizador não só detecta a tecla principal que desencadeia o evento (keydown), como simultaneamente atualiza o painel de "Modificadores" na tela, destacando se você também está segurando ativamente as teclas Control, Shift, Alt ou a tecla Meta (Windows/Cmd) no momento do clique.
Como testar as teclas de F1 a F12 sem ativar atalhos do navegador?
Por padrão, ao pressionar uma tecla como o F5, o navegador tentará recarregar a página antes que você possa ler o código. Para resolver isso, utilizamos um botão de configuração chamado "Bloquear ações nativas". Quando ativado (usando o método event.preventDefault()), a ferramenta sobrepõe os comandos do navegador, permitindo a leitura segura de qualquer tecla de função.
O Keycode Finder funciona em celulares e dispositivos móveis?
Sim. Dispositivos móveis trabalham com teclados virtuais que geram os eventos de forma ligeiramente diferente (frequentemente disparando um código unificado como "229"). O sistema possui gatilhos de fallback, implementando um campo de captura invisível compatível com eventos touch que possibilita a avaliação do caractere gerado e acionamentos na tela mobile.
