Les événements clavier JavaScript sont un désordre — voici la référence des codes clavier que vous verrez souvent

À un moment donné de votre parcours en JavaScript, vous vous installez pour gérer un clavier. C’est simple. Vous ouvrez MDN, et vous découvrez non une, non deux, mais quatre propriétés différentes que vous pourriez utiliser : keyCode, which, keyet code. Trois d’entre elles sont obsolètes. Aucune ne définit clairement ce qu’est une « clé ». Félicitations — vous êtes arrivé dans l’un des coins les plus historiquement chaotiques du web.

Cette référence coupe le bruit. Vous apprendrez quels propriétés utiliser, quels éviter, et obtenez une table complète des valeurs clés courantes afin de ne plus deviner.

Les Quatre Propriétés — Et Pourquoi Il Y En A Quatre

Les événements clavier en JavaScript exposent plusieurs propriétés sur l’objet événement. Voici ce que chacune représente réellement :

Propriété	Ce qu’elle retourne	Statut
event.key	Une chaîne lisible par l’humain comme "Enter", "ArrowUp", ou "a"	✅ Utilisez cela
event.code	L’identifiant physique de la touche, par exemple "KeyA", "Digit1", "ArrowLeft"	✅ Utilisez cela pour la détection indépendante de l’affichage
event.keyCode	Un code numérique, par exemple 13 pour Entrée	⚠️ Obsolète — évitez dans les nouveaux codes
event.which	Même valeur numérique que keyCode	⚠️ Obsolète — évitez dans les nouveaux codes

keyCode et which sont essentiellement la même chose, provenant de différentes époques de l’histoire des navigateurs. Les deux retournent un entier représentant la touche. Les deux sont obsolètes. Les deux fonctionnent encore dans tous les navigateurs, ce qui explique pourquoi vous les rencontrerez dans des bases de code datant de avant 2015.

Pourquoi keyCode Obsolète Mais Toujours Partout

keyCode était la méthode originale pour détecter les appuis de touche dans le DOM du navigateur, remontant à l’ancien modèle d’événements de Netscape. Elle fonctionnait — en grande partie — mais présentait des incohérences sérieuses : la même touche pouvait retourner des codes différents selon les navigateurs, les lettres majuscules n’étaient pas gérées de manière uniforme, et les touches non-ASCII étaient un désordre.

Le W3C a formellement obsoléscé keyCode et which dans le spécification DOM Level 3 Events (2016) en faveur de key et code. Mais l’obsoléscence signifie « nous vous recommandons d’arrêter d’utiliser cela », et non pas « nous allons briser votre site ». Les navigateurs le soutiennent encore et le feront probablement pour un long temps à venir.

Le résultat : les bases de code anciennes sont criblées de event.keyCode === 13 vérifications, des réponses sur Stack Overflow datant de 2012 le recommandent, et vous les trouvez dans des codes en production partout. Elle ne disparaît pas bientôt — vous n’avez simplement pas besoin de écrire de nouveaux codes utilisant cela.

event.key vs event.code — Quelle est celle que vous avez besoin ?

C’est la distinction qui embrouille la plupart des gens. Les deux sont modernes et corrects — ils répondent simplement à des questions différentes.

• Utilisez event.key lorsque vous êtes intéressé par le caractère que l’utilisateur a voulu taper. Sur un clavier américain, appuyer sur Shift + 2 vous donne event.key === "@". Sur un clavier allemand, la même touche physique donne un caractère différent. event.key réfléchit au caractère logique réel.
• Utilisez event.code lorsque vous êtes intéressé par la touche physique appuyée, indépendamment de l’affichage. C’est ce que vous voulez pour les contrôles de jeux, les raccourcis clavier qui ne doivent pas changer selon la langue de l’utilisateur, ou tout ce qui où « la touche Q » signifie la touche de haut à gauche — pas le caractère Q.

Pour la plupart des cas pratiques — soumission de formulaires, fermeture de dialogues, raccourcis — event.key est ce que vous voulez. Pour les contrôles de jeux et les raccourcis basés sur la position, utilisez event.code.

Gérer les touches correctement en JavaScript moderne

Voici comment gérer les cas courants correctement :

Touche Entrée (soumission de formulaires, dialogues de confirmation)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Touche Échap (fermer les modales, annuler des actions)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Touche Flèche (navigation, curseurs, contrôles de jeux)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

Touche de modificateur (Ctrl+S, Cmd+K, etc.)

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Utilisez e.ctrlKey, e.shiftKey, e.altKeyet e.metaKey (Cmd sur Mac) pour détecter les combinaisons de modificateurs. Ces propriétés ne sont pas obsolètes et fonctionnent exactement comme prévu.

Table complète des touches

Le tableau ci-dessous couvre les touches que vous utiliserez le plus souvent. Pour tout autre cas non listé, utilisez l’outil Info sur les codes de touche — appuyez sur n’importe quelle touche et obtenez immédiatement la event.key, event.code, et les valeurs héritées keyCode .

Touche	event.key	event.code	keyCode (hérité)
Entrez	"Enter"	"Enter"	13
Échapper	"Escape"	"Escape"	27
Espace	" " (espace)	"Space"	32
Languette	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Delete	"Delete"	"Delete"	46
Flèche Haut	"ArrowUp"	"ArrowUp"	38
Flèche Bas	"ArrowDown"	"ArrowDown"	40
Flèche Gauche	"ArrowLeft"	"ArrowLeft"	37
Flèche Droite	"ArrowRight"	"ArrowRight"	39
Maison	"Home"	"Home"	36
Fin	"End"	"End"	35
Page Haut	"PageUp"	"PageUp"	33
Page Bas	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift (gauche)	"Shift"	"ShiftLeft"	16
Ctrl (gauche)	"Control"	"ControlLeft"	17
Alt (gauche)	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
Caps Lock	"CapsLock"	"CapsLock"	20
a–z (minuscules)	"a"–"z"	"KeyA"–"KeyZ"	65–90
0–9 (ligne supérieure)	"0"–"9"	"Digit0"–"Digit9"	48–57
0–9 (clavier numérique)	"0"–"9"	"Numpad0"–"Numpad9"	96–105

La touche de code que vous ne pouvez pas vous souvenir ? Recherchez-la en temps réel

Aucune table de référence ne couvre toutes les touches pour tous les claviers. Lorsque vous avez besoin des valeurs exactes pour une touche que vous ne connaissez pas — une touche du clavier numérique, une touche de média, un caractère régional — la méthode la plus rapide est d’appuyer sur celle-ci et de la voir.

Le Info sur les codes de touche fais exactement cela. Appuyez sur n’importe quelle touche et vous obtenez immédiatement event.key, event.code, event.keyCodeet event.which — ainsi que l’état des modificateurs. Aucune copie-collage à partir de MDN, aucune hypothèse sur ce que « NumpadEnter » est réellement appelé.

Version courte

• Utilisez event.key pour la plupart des cas de gestion du clavier — lisible, moderne, et sensible au locale.
• Utilisez event.code lorsque la position physique de la touche est plus importante que le caractère (contrôles de jeux, raccourcis basés sur la position).
• Arrêtez d’écrire de nouveaux codes utilisant event.keyCode ou event.which. Elles fonctionnent, mais elles sont obsolètes et moins prévisibles.
• Lorsque vous rencontrez du code ancien utilisant keyCode === 13, cela signifie Entrée. keyCode === 27 signifie Échap. Le tableau ci-dessus contient le reste.
• Pour une touche que vous ne trouvez pas dans aucune référence, appuyez-y dans l’ Info sur les codes de touche et obtenez la réponse instantanément.

Vous aimerez peut-être aussi