Utilia
Categorias ▾
Idioma: pt ▾

Códigos de teclas JavaScript

Prime qualquer tecla para ver os valores JavaScript event.key, event.code, keyCode, which e location, com modificadores, histórico e tabela completa.

Clica em «Começar a capturar teclas» ou na caixa abaixo e prime qualquer tecla. Clica fora da caixa para devolver o teclado à página.

event.key Prime uma tecla keyCode – Tab, setas e atalhos também são capturados aqui.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Teclas de bloqueio ativas
–
Modificadores
ctrlKey shiftKey altKey metaKey
Histórico de teclas (mais recentes primeiro)
Histórico de teclas (mais recentes primeiro)
EventokeycodekeyCodelocationModificadoresrepeat
Tabela de códigos de teclas (US QWERTY)

Tabela de códigos de teclas (US QWERTY)
keycodekeyCodelocationNota

os valores de key são os de um esquema dos EUA sem modificadores; outros esquemas produzem outros caracteres para o mesmo code. keyCode e which estão obsoletos, mas continuam muito usados.

Como descobrir o código de uma tecla

  1. Clica em Começar a capturar teclas ou na caixa grande. Um contorno colorido mostra que está à escuta.
  2. Prime qualquer tecla ou atalho. O visor grande mostra o valor key e o antigo keyCode, e os cartões abaixo indicam event.key, event.code, event.keyCode, event.which, event.location, event.repeat e as Teclas de bloqueio ativas (Caps Lock, Num Lock, AltGraph).
  3. Os indicadores de Modificadores acendem-se para ctrlKey, shiftKey, altKey e metaKey.
  4. Copia o Snippet JavaScript para esta tecla. Em Comparar com, escolhe entre event.key, event.code ou event.keyCode (obsoleto).
  5. Percorre o Histórico de teclas (mais recentes primeiro) para comparar vários toques. Marca Registar também os eventos keyup para veres também quando as teclas são largadas.
  6. Consulta ou filtra a Tabela de códigos de teclas (US QWERTY) quando precisas de um valor sem premir a tecla.

Enquanto a caixa tem o foco, a ação predefinida de cada tecla fica bloqueada: Tab, as setas, Backspace ou Ctrl+S são capturados em vez de mudarem o foco ou abrirem uma janela. Clica em qualquer sítio fora da caixa para devolver o teclado à página. Alguns atalhos são tratados pelo sistema operativo antes de chegarem ao navegador (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab e muitas vezes Print Screen), por isso nenhuma página web os consegue ler.

key, code ou keyCode: qual deves usar?

Um KeyboardEvent traz vários valores que respondem a perguntas diferentes:

Propriedade O que indica Exemplo (a tecla A num teclado AZERTY)
key O carácter ou a tecla nomeada produzida, depois do esquema e dos modificadores "a", "A" com Shift
code A posição física da tecla, independente do esquema "KeyQ"
keyCode / which Um número antigo, normalmente o código ASCII da letra maiúscula 65
location 0 padrão, 1 esquerda, 2 direita, 3 teclado numérico 0

Usa key quando o que importa é o significado: Enter para submeter, Escape para fechar, «?» para abrir uma ajuda. Usa code em jogos e atalhos que dependem da posição das teclas, como o movimento WASD, que deve ficar no mesmo sítio num teclado AZERTY francês ou QWERTZ alemão. No teclado português, por exemplo, a tecla «ç» ocupa o lugar do ponto e vírgula americano, por isso o seu code é Semicolon. Evita keyCode e which em código novo: estão obsoletos, os valores variam entre navegadores na pontuação (o Firefox envia 59 para o ponto e vírgula, onde o Chrome envia 186) e não distinguem o Shift esquerdo do direito nem as duas teclas Enter. Continua a ser útil conhecê-los para manter código antigo, e é por isso que esta ferramenta os mostra.

Sobre o snippet

O listener gerado corresponde exatamente à tecla que premiste, incluindo Ctrl, Alt e Meta. Para caracteres imprimíveis comparados com key, o Shift fica de fora porque já faz parte do valor: Shift+1 dá "!" num esquema dos EUA. Quando premes um modificador sozinho, o snippet não repete a respetiva flag. Lembra-te de que metaKey é a tecla Cmd no Mac e a tecla Windows num PC, por isso os atalhos multiplataforma testam normalmente event.ctrlKey || event.metaKey.

Perguntas frequentes

Porque é que o keyCode mostra o mesmo número para caracteres diferentes?

O keyCode identifica a tecla, não o carácter. O algarismo 1 e «!» partilham o 49, e «a» e «A» partilham o 65. Lê key para obteres o carácter real.

Porque é que uma tecla aparece com um code de outra letra?

O code dá nome às teclas segundo a sua posição num teclado US QWERTY. A tecla com a etiqueta A num teclado francês fica onde está o Q num teclado americano, por isso o seu code é KeyQ enquanto o key é «a».

O que significa «Dead» em event.key?

É uma tecla morta, como o acento agudo, o til ou o acento circunflexo do teclado português, que espera pela tecla seguinte para formar uma letra acentuada. O carácter final chega com o evento de tecla seguinte ou com o evento input de um campo de texto.

Porque é que event.repeat diz sim?

Estás a manter a tecla premida e o sistema operativo está a enviar repetições automáticas. Verifica event.repeat para as ignorares, por exemplo para disparares um atalho só uma vez.

O que escrevo fica registado ou é enviado?

Não. Os eventos de teclado são lidos por esta página no teu navegador e nunca são enviados para lado nenhum. O histórico desaparece quando recarregas ou sais da página.

Ferramentas relacionadas