Question 1

Apertei uma tecla e nada mudou na tela

Accepted Answer

O painel escuta apenas o campo de texto do topo, e só o evento keydown. A página coloca o cursor nele ao carregar, mas se você clicou em outro ponto, rolou a página ou trocou de aba, o foco saiu e as teclas deixam de ser registradas: clique no campo de novo. Combinações que o sistema operacional intercepta antes do navegador, como Alt+Tab, Cmd+Q ou Cmd+Espaço, não chegam à página e nunca vão aparecer. Nada é digitado no campo porque o comportamento padrão da tecla é cancelado.

Question 2

Por que event.key aparece entre aspas e os outros campos não?

Accepted Answer

Porque esse valor é impresso serializado, o que torna visível o que uma string solta esconderia. A barra de espaço aparece como um par de aspas com um espaço no meio, em vez de parecer campo vazio; o Enter aparece como Enter entre aspas; e uma tecla morta de acento aparece como Dead. Os campos code, keyCode, which e location saem crus, sem aspas, porque não carregam essa ambiguidade.

Question 3

keyCode e which mostram o mesmo número. Qual deles eu uso?

Accepted Answer

Nenhum dos dois em código novo. Ambos são legado e o navegador preenche os dois com o mesmo valor apenas por compatibilidade. Use event.key quando o que importa é o caractere produzido, que muda com Shift e com o layout, e event.code quando importa a posição física da tecla: a que fica ao lado do Tab é KeyQ no QWERTY e continua KeyQ num teclado AZERTY, onde key devolve a letra a. O campo location resolve a outra dúvida clássica, separando Shift esquerdo do direito e o teclado numérico, com os valores STANDARD, LEFT, RIGHT e NUMPAD.

Keycode Info

Descubra o código de qualquer tecla

Perguntas frequentes

Ferramentas Relacionadas

Escape / Unescape JavaScript

Formatador JavaScript

Minificador JavaScript

Gerador de Keybinding VS Code

HTML Preview

Gerador Cubic Bezier