Code de la touche Échap en JavaScript

Pour Échap, event.key vaut Escape, event.code vaut Escape et l’ancien keyCode vaut 27. Appuyez sur n’importe quelle touche dans le Key Code Finder pour voir ses valeurs en direct.

Mis à jour le

PropriétéValeur
event.keyEscape
event.codeEscape
event.keyCode / which (obsolète)27

Comment détecter Échap

document.addEventListener('keydown', (event) => {
  if (event.key === "Escape") {
    // Escape 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 diffèrent selon les navigateurs et les dispositions de clavier.

Comment les navigateurs gèrent Échap

Échap est la méthode standard pour fermer les boîtes de dialogue, les menus et les popovers. Un élément <dialog> natif se ferme tout seul avec Échap et déclenche un événement cancel. Les navigateurs utilisent aussi Échap pour quitter le plein écran, et cette pression n’est généralement pas transmise à la page.

Dans React

<input onKeyDown={(e) => { if (e.key === "Escape") { /* … */ } }} />

Questions fréquentes

Quel est le keyCode de la touche Échap ?
27. Il est toutefois obsolète : utilisez event.key (« Escape ») ou event.code (Escape) dans le nouveau code.
Quelle est la différence entre event.key et event.code ?
event.key est le caractère ou l’action produit par 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 directionnelles.