Comment détecter les touches du pavé numérique
document.addEventListener('keydown', (event) => {
if (event.code.startsWith('Numpad')) {
// Numpad keys was pressed
}
});Utilisez event.key pour réagir à la signification de la touche (elle suit la disposition du clavier) et event.code pour sa position physique, par exemple WASD dans les jeux. keyCode et which sont obsolètes : ils fonctionnent encore, mais leurs valeurs varient selon les navigateurs et les dispositions de clavier.
Comment les navigateurs gèrent les touches du pavé numérique
Les chiffres du pavé numérique ont la même event.key que les chiffres de la rangée supérieure, mais des valeurs event.code différentes (Numpad0–Numpad9) et des keyCode 96–105. NumpadAdd vaut 107, NumpadSubtract 109, NumpadMultiply 106, NumpadDivide 111 et NumpadDecimal 110.
In React
<input onKeyDown={(e) => { if (e.code.startsWith('Numpad')) { /* … */ } }} />Recherche de keycode JavaScript
Appuyez sur une touche et découvrez immédiatement toutes les propriétés de l'événement clavier, avec un extrait keydown prêt à copier pour vos raccourcis.
Questions fréquentes
Quel est le keyCode des touches du pavé numérique ?
96. Il est toutefois obsolète : utilisez event.key (« 0–9, +, -, *, /, . ») ou event.code (Numpad0) dans le nouveau code.
Quelle est la différence entre event.key et event.code ?
event.key est le caractère ou l’action que produit la touche avec la disposition actuelle ; event.code est la position physique de la touche, identique sur toutes les dispositions.
Faut-il utiliser keydown ou keypress ?
keydown. L’événement keypress est obsolète et ne se déclenche pas pour les touches qui ne produisent pas de caractère, comme Échap ou les flèches.