Un utilisateur appuie sur Échap, et la modale ne se ferme pas. Il tape Entrée dans le champ de recherche, et rien ne se produit. Cela vous semble familier? La gestion du clavier en JavaScript paraît simple jusqu’à ce que vous commenciez à jongler avec trois événements, une douzaine de propriétés et une jungle de différences entre navigateurs.

Chaque keydown ou keyup génère un objet KeyboardEvent doté d’une vingtaine de champs. Certains sont dépréciés depuis l’époque d’IE, d’autres se comportent différemment sous Firefox et Chrome. Et la documentation MDN est truffée de mentions «ne pas utiliser». Les développeurs n’ont pas besoin d’une énième spécification, ils ont besoin d’un aide-mémoire qui fonctionne.

Voici une référence complète sur les événements clavier: de l’anatomie de KeyboardEvent jusqu’aux extraits prêts à l’emploi pour les raccourcis clavier. Gardez le tableau de codes en favori, vous en aurez besoin dans pratiquement tous vos projets.

💡 Aperçu rapide:

• Utilisez keydown plutôt que keypress: il fonctionne pour toutes les touches.
• event.key donne le symbole de la touche, event.code renvoie son code physique.
• event.keyCode et event.which sont dépréciés, ne les utilisez plus dans du nouveau code.
• Le tableau ci-dessous regroupe les codes pour toutes les touches standard dans les navigateurs modernes.

Ce que contient un KeyboardEvent

Lorsqu’un utilisateur appuie sur une touche, le navigateur crée un objet KeyboardEvent, descendant de UIEvent, qui étend lui-même l’objet Event de base. On y trouve les propriétés de la touche, l’état des modificateurs et les informations de disposition du clavier.

La spécification UI Events évolue: de nouvelles propriétés apparaissent, d’anciennes deviennent dépréciées. Le principal changement de ces dernières années est l’abandon des codes numériques (keyCode / charCode / which) au profit de event.key et event.code. Tous les navigateurs modernes prennent en charge ce duo, et vous devriez bâtir votre logique sur eux.

La prise en charge par les navigateurs est quasi complète: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Si votre projet n’est pas bloqué sur IE11, vous pouvez oublier event.which.

Trois événements: keydown, keypress et keyup

Le navigateur distingue trois événements clavier. L’ordre de déclenchement est fixe:

• keydown, la touche est enfoncée (moment du contact);
• keypress, la touche est maintenue et génère un caractère (uniquement pour les touches de caractère);
• keyup, la touche est relâchée.

S’abonner à keydown via addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

Pour les gestionnaires en ligne, utilisez un attribut d’élément:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Si vous affichez l’objet événement dans la console, vous verrez la structure complète avec tous les champs hérités de UIEvent et Event:

Pourquoi keydown est le choix principal

keypress est officiellement reconnu comme déprécié. Il ne se déclenche que pour les touches produisant une valeur de caractère et ne capture pas les modificateurs: ni Alt, ni Ctrl, ni Shift, ni Meta. Vous ne pouvez pas gérer Ctrl+Z ou Shift+Tab via keypress.

La différence entre keydown et keyup: keydown se déclenche avant que le navigateur ne traite la touche; keyup se déclenche après. Une conséquence importante en découle: event.preventDefault() dans keydown annule l’action du navigateur (par exemple, la saisie d’un caractère dans un champ), mais dans keyup, cela ne fonctionne pas. Pour les raccourcis, la validation de saisie et les contrôles de jeu, vous avez besoin de keydown.

Tableau des propriétés de KeyboardEvent

Les trois dernières lignes sont dépréciées. Partout où c’est possible, passez à event.key. Si vous devez prendre en charge un ancien navigateur, prévoyez une solution de repli:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Mais en 2026, ce type de code ne concerne que les projets legacy. event.key fonctionne partout.

Touches modificatrices et combinaisons

Les touches Control, Shift, Alt et Meta n’effectuent pas d’actions par elles-mêmes, mais modifient le comportement des autres touches. Appuyer sur Z donne la lettre «z», tandis que Ctrl+Z déclenche l’annulation.

Les propriétés booléennes de l’événement aident à suivre un modificateur:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

La même approche s’applique à toutes les combinaisons: Ctrl+S (enregistrer), Ctrl+Shift+N (nouvelle fenêtre), Alt+Tab (basculer). Vérifiez dans l’ordre: d’abord les modificateurs via les indicateurs booléens, puis event.key pour la touche spécifique. Cela rend la logique lisible au lieu de se noyer dans des codes numériques.

Tableau complet des codes de touches

Voici le tableau actuel pour toutes les touches standard. Les valeurs event.key et event.code sont données telles que les navigateurs modernes (Chrome, Firefox, Edge, Safari) les renvoient.

Navigation et actions

Rangée numérique (clavier principal)

Lettres A-Z

event.key renvoie la valeur en minuscule pour les lettres. event.code ne dépend ni de la casse ni de la disposition: KeyA désigne la touche physique A, même si la disposition est russe et que la saisie donne «Ф».

Touches spéciales

Pavé numérique (Numpad)

Touches de fonction

Système et multimédia

Ponctuation et symboles

Notes importantes sur le tableau

• event.which est une propriété dépréciée, utilisez event.key.
• event.code est identique pour les lettres minuscules (a) et majuscules (A), il s’agit de la touche physique. event.key renvoie le caractère réel en tenant compte de la casse.
• Sous Firefox, les valeurs de event.which pour les touches Equal, Semicolon et Minus diffèrent de Chrome/Edge/Safari (indiqué dans le tableau). Une raison de plus de ne pas utiliser event.which.
• Les navigateurs basés sur Chromium et Firefox donnent des valeurs event.key et event.code identiques pour toutes les touches listées.
• Claviers virtuels: la spécification UI Events exige qu’un clavier virtuel (mobile, à l’écran) reproduisant une disposition standard renvoie un event.code correct. En pratique, les navigateurs mobiles (Chrome Android, Safari iOS) gèrent correctement keydown/keyup pour les touches principales, mais event.code peut être vide pour les dispositions non standard.

Entraîneur interactif

Pour une vérification rapide de tout code issu de l’article, utilisez l’entraîneur clavier: keyevents.netlify.app. Placez votre curseur dans la zone, appuyez sur des touches et visualisez en temps réel les valeurs de event.key, event.code et event.which, ainsi que l’état des indicateurs de modificateurs. Le code source est disponible sur GitHub.

Vidéo: les événements clavier en pratique

Un décryptage pratique et concis de keydown et keyup, la gestion des modificateurs et des raccourcis avec des exemples en direct:

⁉️🤔 Foire aux questions

Quelle est la différence entre event.key et event.code?

event.key renvoie la valeur du caractère en tenant compte de la disposition et de la casse: pour la touche A, c’est "a" (ou "A" avec Shift), pour une disposition russe, "ф". event.code renvoie le code de la touche physique, identique pour toutes les dispositions: "KeyA". Pour les raccourcis, event.code est plus fiable, il ne dépend pas de la langue de saisie. Pour la saisie de texte, utilisez event.key.

Pourquoi keypress n’est-il plus utilisé?

La spécification W3C a marqué keypress comme déprécié: il ne se déclenche que pour les touches de caractère et ne capture pas les modificateurs. Vous ne pouvez pas gérer Ctrl+C, Shift+Tab et d’autres combinaisons via keypress. keydown couvre toutes les touches et est pris en charge de manière identique par tous les navigateurs modernes.

Peut-on complètement abandonner event.which et event.keyCode?

Oui, en 2026, vous le pouvez. event.key est pris en charge dans Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Si votre projet ne cible pas IE11 ou Firefox 28, utilisez uniquement event.key et event.code.

Comment gérer un appui long sur une touche?

Combinez keydown et keyup. Au keydown, lancez un timer ou requestAnimationFrame, au keyup, réinitialisez-le. Pour les contrôles de jeu, c’est le schéma standard: touche maintenue, le personnage se déplace; relâchée, il s’arrête.

Les événements clavier fonctionnent-ils sur les appareils mobiles?

keydown et keyup fonctionnent dans les navigateurs mobiles lorsqu’un clavier Bluetooth externe est utilisé. Le clavier à l’écran génère des événements input, et non keydown/keyup pour toutes les touches. Pour les champs de texte sur mobile, il est donc préférable d’utiliser l’événement input.

Comment distinguer la touche Shift gauche de la droite?

Via event.code: "ShiftLeft" ou "ShiftRight". event.key renvoie "Shift" pour les deux. Même chose pour Control, Alt et Meta.

Ce qu’il faut utiliser dans votre projet

Si vous écrivez du nouveau code, prenez keydown comme événement principal et, pour l’identification de la touche, event.key (symbole) et event.code (touche physique). Cette combinaison couvre tous les scénarios: raccourcis clavier, navigation, contrôles de jeu, validation de formulaire.

Si vous maintenez un produit avec du code legacy basé sur event.which ou event.keyCode, planifiez un refactoring. Le volume de travail est faible: un remplacement dans les gestionnaires, mais le bénéfice est un code propre et prévisible, sans la jungle des différences entre navigateurs.

Gardez le tableau ci-dessus en favori. La prochaine fois que vous aurez besoin du code pour une touche spécifique, ouvrez-le et copiez la valeur event.code nécessaire, sans avoir à vous souvenir des codes numériques de l’ère IE6.