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") { /* … */ } }} />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.