Détecter l'événement d'entrée au clavier en JavaScript

Un écouteur d’événement est simplement une fonction JavaScript qui est déclenchée lorsqu’un événement d’entrée utilisateur particulier se produit. Un exemple simple d’un tel événement est un clic de souris ou une pression sur un bouton du clavier. Les fonctions d’écoute d’événement doivent d’abord être enregistrées avec une cible. Après cela, chaque fois qu’un événement particulier qui nous intéresse se produit, notre fonction d’écoute est déclenchée. Plusieurs écouteurs peuvent être attachés à la même cible qui peut écouter les mêmes types d’événements ou différents.

L’article d’aujourd’hui vous montre comment reconnaître les événements de saisie au clavier en JavaScript.

Détecter l’événement d’entrée du clavier à l’aide de addEventListener() dans JavaScript

Il s’agit d’une méthode intégrée fournie par JavaScript qui enregistre un écouteur d’événement. C’est une méthode de l’interface EventTarget. Chaque fois que l’événement spécifié est détecté sur la cible, notre fonction configurée est appelée.

Syntaxe

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

Paramètre

• $type : C’est un paramètre obligatoire qui n’accepte qu’une chaîne qui spécifie le type d’événement à écouter. Il est sensible à la casse et prend en charge divers événements tels que mouse, keyboard, input, database, etc.
• $listener : C’est un paramètre obligatoire, un objet qui recevra une notification lorsqu’un événement du type spécifié se produit. Cet objet doit implémenter l’interface EventListener ou une fonction JavaScript.
• $options : C’est un paramètre optionnel qui précise les caractéristiques de l’écouteur d’événement. Certaines des caractéristiques sont capture, once, passive et signal.
• $useCapture : C’est un paramètre optionnel qui accepte des valeurs booléennes indiquant si des événements de ce type sont envoyés à l’écouteur enregistré avant d’être envoyés à un EventTarget en dessous dans l’arborescence DOM.

Il existe trois types d’événements de clavier que vous pouvez écouter keydown, keypress et keyup. Le navigateur déclenche un événement keydown, lorsqu’une touche du clavier est enfoncée et lorsqu’elle est relâchée, un événement keyup se déclenche. Chaque événement Keyboard a son propre keyCode ou key. Par exemple, le bouton Enter a la touche Enter et le keyCode 13.

Exemple de code :

<input type="text" id="textId">

document.getElementById('textId').addEventListener('keydown', myFunction);

function myFunction() {
  switch (event.key) {
    case 'ArrowDown':
      console.log('ArrowDown');
      break;
    case 'ArrowUp':
      console.log('ArrowUp');
      break;
    case 'ArrowLeft':
      console.log('ArrowLeft');
      break;
    case 'ArrowRight':
      console.log('ArrowRight');
      break;
    default:
      console.log(event.key, event.keyCode);
      return;
  }

  event.preventDefault();
}

Production :