Como detectar Alt / Option
document.addEventListener('keydown', (event) => {
if (event.key === 'Alt') {
// Alt / Option was pressed
}
});Use event.key para reagir ao significado da tecla (ele segue o layout do teclado) e event.code para a posição física, por exemplo WASD em jogos. keyCode e which são obsoletos: ainda funcionam, mas os valores variam entre navegadores e layouts.
Como os navegadores tratam Alt / Option
Verifique event.altKey. Em muitos teclados europeus, a tecla Alt direita é AltGr (event.key === "AltGraph") e digita caracteres como @ ou €, então evite atalhos Ctrl+Alt que entrem em conflito com ela. No Mac, a Option altera event.key para caracteres especiais — use event.code em atalhos com Option.
No React
<input onKeyDown={(e) => { if (e.key === 'Alt') { /* … */ } }} />Verificador de Keycode JavaScript
Pressione qualquer tecla e veja na hora todas as propriedades do evento de teclado, com um trecho keydown pronto para copiar para atalhos.
Perguntas frequentes
Qual é o keyCode da tecla Alt / Option?
18. Porém, ele é obsoleto: use event.key (“Alt”) ou event.code (AltLeft) em código novo.
Qual é a diferença entre event.key e event.code?
event.key é o caractere ou ação que a tecla produz com o layout atual; event.code é a posição física da tecla, igual em todos os layouts.
Devo usar keydown ou keypress?
keydown. O evento keypress é obsoleto e não dispara para teclas que não produzem caracteres, como Escape ou as setas.