Como detectar as teclas do Numpad
document.addEventListener('keydown', (event) => {
if (event.code.startsWith('Numpad')) {
// Numpad keys 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 dela, por exemplo WASD em jogos. keyCode e which estão obsoletos: ainda funcionam, mas seus valores variam entre navegadores e layouts.
Como os navegadores tratam as teclas do Numpad
Os dígitos do Numpad têm o mesmo event.key que os dígitos da linha superior, mas valores event.code diferentes (Numpad0–Numpad9) e keyCodes 96–105. NumpadAdd é 107, NumpadSubtract 109, NumpadMultiply 106, NumpadDivide 111 e NumpadDecimal 110.
No React
<input onKeyDown={(e) => { if (e.code.startsWith('Numpad')) { /* … */ } }} />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 das teclas do Numpad?
96. Ele está obsoleto, porém: use event.key (“0–9, +, -, *, /, .”) ou event.code (Numpad0) em código novo.
Qual é a diferença entre event.key e event.code?
event.key é o caractere ou a 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 está obsoleto e não dispara para teclas que não produzem caracteres, como Escape ou as setas.