How to detect Numpad keys
document.addEventListener('keydown', (event) => {
if (event.code.startsWith('Numpad')) {
// Numpad keys was pressed
}
});Use event.key to react to what the key means (it follows the keyboard layout) and event.code for its physical position, for example WASD in games. keyCode and which are deprecated: they still work, but their values differ between browsers and layouts.
How browsers treat Numpad keys
Numpad digits have the same event.key as the top-row digits but different event.code values (Numpad0–Numpad9) and keyCodes 96–105. NumpadAdd is 107, NumpadSubtract 109, NumpadMultiply 106, NumpadDivide 111 and NumpadDecimal 110.
In React
<input onKeyDown={(e) => { if (e.code.startsWith('Numpad')) { /* … */ } }} />JavaScript Keycode FinderPress any key and instantly see every property of the keyboard event, with a copy-ready keydown snippet for shortcuts.
Open the tool Frequently asked questions
What is the keyCode for Numpad keys?
96. It’s deprecated, though: use event.key (“0–9, +, -, *, /, .”) or event.code (Numpad0) in new code.
What is the difference between event.key and event.code?
event.key is the character or action the key produces with the current layout; event.code is the physical key position, the same on every layout.
Should I use keydown or keypress?
keydown. The keypress event is deprecated and doesn’t fire for keys that don’t produce characters, such as Escape or the arrow keys.