Como usar: Detector de Keycode JavaScript
- Clique na caixa (ou em qualquer lugar da página) e pressione uma tecla ou atalho.
- Leia o
event.key, oevent.codee okeyCodelegado. - Copie o handler
keydowngerado para o seu atalho.
key, code e keyCode
| Propriedade | O que informa | Para que serve |
|---|---|---|
event.key | O caractere ou nome da tecla gerado, respeitando o layout e o Shift ("a", "A", "Enter") | Entrada de texto, “digite ? para ajuda” |
event.code | A posição física da tecla, independente do layout ("KeyA", "Digit1") | Jogos (WASD) e atalhos baseados na posição |
event.keyCode / which | Códigos numéricos legados (Enter = 13, Esc = 27) | Apenas código antigo — obsoleto |
event.location | 0 padrão, 1 esquerda, 2 direita, 3 teclado numérico | Diferenciar Shift esquerdo/direito ou teclas do numérico |
Códigos de tecla comuns
| Tecla | event.key | event.code | keyCode |
|---|---|---|---|
| Enter | Enter | Enter | 13 |
| Escape | Escape | Escape | 27 |
| Espaço | " " | Space | 32 |
| Tab | Tab | Tab | 9 |
| Backspace | Backspace | Backspace | 8 |
| Setas | ArrowLeft/Up/Right/Down | iguais | 37–40 |
| A–Z | a–z / A–Z | KeyA–KeyZ | 65–90 |
| 0–9 | 0–9 | Digit0–Digit9 | 48–57 |
| F1–F12 | F1–F12 | F1–F12 | 112–123 |
Escrevendo handlers de atalhos
Verifique os modificadores explicitamente (e.ctrlKey || e.metaKey cobre o Ctrl no Windows e o ⌘ no macOS), chame e.preventDefault() apenas nos atalhos que você trata e ignore o seu handler enquanto o usuário digita em campos de entrada. Prefira key para atalhos com letras, para que sigam o layout do teclado do usuário, e use code quando a posição física importar.
Teste expressões regulares para tratamento de teclas no testador de regex, ou veja como o navegador se identifica com o analisador de user agent.
Também pesquisado como: keycode javascript, lista de keycode, event.key, event.code, visualizador de evento de teclado, verificar key code, encontrar keycode, keycode js.
Ferramentas que combinam com: Detector de Keycode JavaScript
- Editor HTML Online — Um playground de código leve: edite HTML, CSS e JavaScript lado a lado, veja o resultado na hora, leia a saída do console e baixe sua página como um único arquivo HTML.
- Formatador JavaScript — Desminifique e deixe legível JavaScript, JSON ou JSX com a indentação e o estilo de chaves que você preferir, ou remova espaços e comentários com um minificador verificado.
- Resolução da Tela — Os tamanhos da sua tela e da janela do navegador em pixels CSS, a razão de pixels do dispositivo e a resolução física real, medidos ao vivo pelo seu navegador.
- Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
Perguntas frequentes
Devo usar keyCode?
Não.
keyCode e which são obsoletos. Use event.key para o caractere e event.code para a tecla física.Qual é o keycode da tecla Enter?
Enter tem keyCode 13,
key "Enter" e code "Enter" (ou "NumpadEnter" no teclado numérico).Por que o Ctrl+W fecha a aba?
Alguns atalhos do navegador não podem ser interceptados por páginas web por razões de segurança, incluindo Ctrl+W, Ctrl+T e Ctrl+N na maioria dos navegadores.
Posso instalar o Detector de Keycode JavaScript como um aplicativo da web e usá-lo offline?
Sim. O Detector de Keycode JavaScript é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.