Codes des touches numériques en JavaScript

Chaque touche numérique avec son event.key, event.code et son keyCode déprécié. Les chiffres de la rangée supérieure utilisent keyCode 48–57 ; ceux du pavé numérique 96–105 et event.code Numpad0–Numpad9.

Mis à jour le

Toucheevent.keyevent.codekeyCode
00Digit0 / Numpad048 / 96
11Digit1 / Numpad149 / 97
22Digit2 / Numpad250 / 98
33Digit3 / Numpad351 / 99
44Digit4 / Numpad452 / 100
55Digit5 / Numpad553 / 101
66Digit6 / Numpad654 / 102
77Digit7 / Numpad755 / 103
88Digit8 / Numpad856 / 104
99Digit9 / Numpad957 / 105

Détecter un chiffre depuis l’une ou l’autre rangée

document.addEventListener('keydown', (e) => {
  if (/^[0-9]$/.test(e.key)) {
    console.log('digit', Number(e.key)); // top row or numpad
  }
});

Sur les claviers AZERTY français, la rangée supérieure saisit des symboles (&, é, " …) sans Maj, donc e.key n’est pas un chiffre à cet endroit — une raison de plus de tester e.key plutôt que de supposer les positions.

Questions fréquentes

La valeur de event.key est-elle en majuscule ou en minuscule pour les chiffres ?
Les lettres suivent Maj et Verr. Maj : event.key vaut « a » normalement et « A » avec Maj. event.code reste KeyA dans les deux cas.
Les codes de touches changent-ils selon la disposition du clavier ?
event.key change selon la disposition (sur un clavier AZERTY français, la position A saisit Q) ; event.code désigne toujours la touche physique.
Faut-il encore utiliser keyCode ?
Non — il est déprécié. Utilisez event.key pour les caractères et event.code pour les positions.