Identificador de keyCode JavaScript
Pressione qualquer tecla para obter seus valores keyCode, key, code e which
Captura de teclado
Coloque o foco aqui e pressione uma tecla
Os eventos de teclado são capturados apenas nesta área. Tab registra a tecla e move o foco para o próximo controle.
Para obter eventos de teclado completos, use um teclado físico. Teclados de dispositivos móveis podem omitir algumas propriedades.
Teclas pressionadas recentemente
As últimas 10 teclas que você pressionar aparecerão aqui.
Detalhes do evento de teclado
event.keyevent.codeevent.keyCodeObsoletoevent.whichObsoletoevent.locationevent.repeatTeclas modificadoras
Coloque o foco na área de captura para inspecionar um evento de teclado.
Sobre o Identificador de keyCode JavaScript
O Identificador de keyCode JavaScript é uma ferramenta interativa e gratuita para desenvolvedores que mostra na hora todas as propriedades do evento de teclado ao pressionar qualquer tecla. Se você está criando atalhos de teclado, controles de jogos ou navegação acessível, conhecer os valores exatos de event.key, event.code, event.keyCode e event.which é essencial para escrever JavaScript confiável e compatível com vários navegadores.
Aplicações web modernas dependem muito do tratamento de eventos de teclado, de validação de formulários a ferramentas de colaboração em tempo real. Este utilitário de consulta de keyCode acaba com o palpite: ele exibe o código da tecla física, o valor lógico da tecla, o identificador de posição e todos os estados dos modificadores (Shift, Ctrl, Alt, Meta) no momento em que a tecla é pressionada, direto no navegador e sem nenhuma configuração.
Ao contrário das tabelas estáticas de referência de keyCode, este testador ao vivo de eventos de tecla em JavaScript captura eventos reais do navegador, para você verificar o comportamento em diferentes sistemas operacionais e layouts de teclado. Ele também indica claramente quais propriedades estão obsoletas, ajudando a escrever código preparado para o futuro, de acordo com os padrões atuais de eventos de teclado do W3C.
Principais recursos
- Exibição em tempo real de
event.key,event.code,event.keyCode,event.whicheevent.location - Indicadores visuais das teclas modificadoras, com os estados de Shift, Ctrl, Alt e Meta
- Selos de obsolescência em propriedades legadas, como keyCode e which
- Cópia com um clique do valor de qualquer propriedade do evento
- Exportação de todos os dados da tecla como um objeto JSON formatado
- Tabela de histórico com as últimas 10 teclas pressionadas para comparação
- Distingue automaticamente as posições esquerda, direita e teclado numérico
- Renderização visual da tecla para uma identificação intuitiva
- Funciona com todas as teclas, incluindo teclas de função, setas e caracteres especiais
- Design totalmente responsivo com suporte a modo escuro
Como usar o Identificador de keyCode JavaScript
- Ative a área de entrada: clique em qualquer ponto da zona tracejada de teclas, no topo da ferramenta, para ativar a captura do teclado.
- Pressione uma tecla: aperte qualquer tecla do teclado e todas as propriedades do evento aparecerão na hora na grade de propriedades abaixo.
- Confira os modificadores: veja os indicadores de Shift, Ctrl, Alt e Meta para saber quais modificadores estavam ativos ao pressionar a tecla.
- Copie os valores: clique no ícone de copiar ao lado de qualquer propriedade para copiar o valor, ou use o botão “Copiar tudo como JSON” para exportar todas as propriedades de uma vez.
- Compare teclas: pressione várias teclas em sequência e role até a tabela de histórico para comparar os códigos lado a lado.
- Limpe e repita: clique no botão Limpar para apagar todos os dados e começar uma nova sessão de testes.
Casos de uso
- Desenvolvimento de atalhos de teclado: identifique os valores corretos de key e code para implementar atalhos personalizados em aplicações web.
- Controles de jogos: associe teclas físicas a ações do jogo verificando event.code, para atalhos independentes do layout do teclado.
- Testes de acessibilidade: verifique se a navegação pelo teclado funciona corretamente e se todos os elementos interativos respondem às teclas esperadas.
- Migração de código legado: encontre os equivalentes modernos de event.key para os valores obsoletos de event.keyCode usados em projetos antigos.
- Depuração entre navegadores: confirme que os eventos de tecla produzem valores consistentes no Chrome, Firefox, Safari e Edge.
- Validação de formulários: descubra os valores exatos das teclas para permitir ou bloquear caracteres específicos em campos de texto.
- Redação de tutoriais e documentação: consulte rapidamente dados corretos de keyCode para incluir em guias para desenvolvedores e materiais de referência.
- Teclado numérico x teclado principal: use a propriedade location para distinguir as teclas numéricas do teclado numérico das do teclado principal.
Perguntas frequentes
Qual é a diferença entre event.key e event.code?
event.key retorna o valor lógico da tecla (por exemplo, “a” ou “A”, dependendo do Shift), enquanto event.code retorna a tecla física do teclado (por exemplo, “KeyA”), independentemente dos modificadores ou do layout do teclado. Use event.key para entrada de caracteres e event.code para atalhos baseados na posição.
O event.keyCode ainda é seguro de usar?
event.keyCode está oficialmente obsoleto pelo W3C e pode se comportar de forma inconsistente entre navegadores. Em projetos novos, use event.key ou event.code. Mesmo assim, muitas bases de código legadas ainda dependem do keyCode, por isso a ferramenta o exibe como referência de compatibilidade com versões anteriores.
Por que o campo location é importante?
A propriedade event.location distingue teclas que aparecem em mais de um lugar do teclado, como Shift esquerdo e Shift direito, ou a linha de números e o teclado numérico. Isso é fundamental para aplicações que precisam diferenciar teclas duplicadas.
Esta ferramenta é gratuita?
Sim, o Identificador de keyCode JavaScript é totalmente gratuito, sem cadastro, sem limites de uso e sem taxas ocultas. Use quantas vezes precisar para desenvolvimento e testes.
Meus dados estão seguros?
Com certeza. Toda a detecção de teclas acontece inteiramente no seu navegador, com eventos de teclado nativos do JavaScript. Nenhuma tecla pressionada nem dado de evento é enviado a um servidor. O que você digita permanece totalmente privado no seu dispositivo.
Funciona em dispositivos móveis?
A ferramenta funciona melhor com um teclado físico. Em dispositivos móveis, o teclado na tela pode não acionar todas as propriedades do evento de forma consistente. Para resultados confiáveis, use um desktop ou notebook, ou conecte um teclado externo ao dispositivo móvel.
Dicas e boas práticas
- Prefira event.key para entrada de caracteres: ele considera automaticamente o layout do teclado, o idioma e o estado dos modificadores.
- Use event.code para controles de jogos: as posições físicas das teclas permanecem as mesmas, independentemente do layout do teclado do usuário (QWERTY, AZERTY, Dvorak).
- Teste sempre as combinações com modificadores: pressione Ctrl+Shift+tecla ou Alt+tecla para confirmar que seus listeners de atalho capturam a combinação correta.
- Procure padrões na tabela de histórico: comparar várias teclas pressionadas ajuda a identificar inconsistências ou a encontrar os códigos certos mais rápido.
- Exporte o JSON para a documentação: use o recurso “Copiar tudo como JSON” para colar dados corretos das teclas direto nos comentários do código ou na documentação para desenvolvedores.
- Teste em vários navegadores: os valores dos eventos de tecla podem variar entre navegadores, especialmente em teclas especiais. Sempre verifique os navegadores de destino.