Cómo detectar las teclas del teclado numérico
document.addEventListener('keydown', (event) => {
if (event.code.startsWith('Numpad')) {
// Numpad keys was pressed
}
});Usa event.key para reaccionar según el significado de la tecla (depende de la distribución del teclado) y event.code para su posición física, por ejemplo WASD en los juegos. keyCode y which están obsoletos: siguen funcionando, pero sus valores varían entre navegadores y distribuciones.
Cómo tratan los navegadores las teclas del teclado numérico
Los dígitos del teclado numérico tienen el mismo event.key que los dígitos de la fila superior, pero distintos valores de event.code (Numpad0–Numpad9) y keyCodes 96–105. NumpadAdd es 107, NumpadSubtract 109, NumpadMultiply 106, NumpadDivide 111 y NumpadDecimal 110.
En React
<input onKeyDown={(e) => { if (e.code.startsWith('Numpad')) { /* … */ } }} />Buscador de Keycodes JavaScript
Pulsa cualquier tecla y mira al instante todas las propiedades del evento de teclado, con un fragmento keydown listo para copiar para tus atajos.
Preguntas frecuentes
¿Cuál es el keyCode de las teclas del teclado numérico?
96. Aunque está obsoleto: en código nuevo usa event.key (“0–9, +, -, *, /, .”) o event.code (Numpad0).
¿Cuál es la diferencia entre event.key y event.code?
event.key es el carácter o la acción que produce la tecla con la distribución actual; event.code es la posición física de la tecla, la misma en todas las distribuciones.
¿Debo usar keydown o keypress?
keydown. El evento keypress está obsoleto y no se dispara con teclas que no producen caracteres, como Escape o las flechas.