Comment détecter les événements d'entrée au clavier en JavaScript

Les entrées au clavier sur une page web sont gérées avec des événements clavier. Enregistrez un écouteur avec addEventListener(), puis lisez l’objet d’événement transmis à son rappel. Utilisez keydown pour répondre lorsqu’une touche est enfoncée et keyup pour répondre après son relâchement.

Écouter les événements clavier avec addEventListener()

Attachez l’écouteur à l’élément qui doit recevoir l’entrée. Utilisez document lorsque la page doit répondre tant que le focus est n’importe où sur la page, ou attachez-le à un contrôle de formulaire lorsque le comportement appartient à ce contrôle. Le rappel reçoit un KeyboardEvent comme paramètre, alors nommez ce paramètre et lisez ses propriétés au lieu de vous fier à une valeur event globale.

Cette illustration exécutable utilise un petit substitut de document et fournit un événement de touche, de sorte que sa forme d’écouteur peut être essayée dans un environnement d’exécution JavaScript. Dans un navigateur, utilisez le vrai document pour recevoir les entrées au clavier.

const listeners = new Map();
const document = {
  addEventListener(type, callback) {
    listeners.set(type, callback);
  }
};

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

listeners.get("keydown")({ key: "ArrowDown" });

Un vrai navigateur appelle le rappel lorsque l’utilisateur appuie sur une touche. Le substitut ci-dessus l’invoque avec un objet contenant la même valeur key que celle utilisée par le gestionnaire ; il ne simule pas les entrées du navigateur ni d’autres comportements de KeyboardEvent.

Choisir entre keydown et keyup

Un événement keydown se déclenche lorsqu’une touche est enfoncée. Il convient bien aux actions qui doivent commencer immédiatement, comme déplacer un personnage de jeu pendant qu’une touche est maintenue. Un événement keyup se déclenche lorsque la touche est relâchée, ce qui convient aux actions qui doivent se produire une fois que l’utilisateur a fini de maintenir une touche. Choisissez l’événement en fonction du moment où l’action doit se produire. Une touche maintenue peut produire des événements keydown répétés, alors tenez-en compte lorsqu’une action ne doit se produire qu’une seule fois.

Lire KeyboardEvent.key et gérer les touches spéciales

Utilisez event.key pour identifier la touche dans un gestionnaire. Il renvoie des valeurs lisibles telles que "a", "Enter" et "ArrowDown", ce qui rend les comparaisons simples. Par exemple, un gestionnaire de touches fléchées peut vérifier si event.key === "ArrowDown" avant de déplacer un élément vers le bas. L’état des modificateurs est également disponible sur l’événement, via des propriétés telles que event.shiftKey et event.ctrlKey.

La valeur de event.key reflète la signification de la touche selon la disposition du clavier active et les modificateurs. Utilisez event.code lorsque le comportement doit suivre une position physique de touche, comme une commande de jeu qui reste au même endroit d’une disposition à l’autre. Pour les commandes ordinaires et les touches nommées, event.key est généralement le choix le plus clair.

Empêcher l’action par défaut d’une touche si nécessaire

Un gestionnaire d’événement clavier peut appeler event.preventDefault() pour supprimer une action du navigateur associée à cette touche, comme le défilement lorsqu’une touche fléchée est utilisée pour une interface personnalisée. Ne l’appelez que lorsque la page prend la responsabilité de cette action, et vérifiez event.cancelable lorsque le comportement dépend de l’annulation. Cela n’empêche pas l’événement d’atteindre d’autres écouteurs ; n’utilisez les méthodes de propagation que lorsque c’est aussi le comportement souhaité. La détection ordinaire des touches n’a pas besoin d’annulation.

Pourquoi keypress devrait généralement être évité

Évitez d’utiliser keypress pour la nouvelle gestion du clavier. Il est obsolète et ne couvre pas toute la gamme de touches de manière cohérente. Utilisez keydown ou keyup pour observer les actions du clavier et event.key pour lire la valeur de la touche. Ne dépendez pas de event.char ni de la propriété héritée keyCode pour le code actuel ; utilisez les propriétés d’événement standard qui décrivent la touche et son état.