Comment gérer les événements des touches fléchées en JavaScript/jQuery ?

Gestion des événements de touches fléchées en Javascript/jQuery

Lorsque vous travaillez avec la saisie au clavier en Javascript ou jQuery, la liaison de fonctions à des touches spécifiques peut être crucial pour contrôler les interactions des utilisateurs et fournir une navigation réactive. Dans ce contexte, un défi courant consiste à capturer les événements liés aux touches fléchées gauche et droite. Contrairement à la croyance populaire, le plugin js-hotkey pour jQuery ne prend pas en charge nativement la liaison des touches fléchées.

Utilisation de Javascript simple

Pour une liaison simple sans utiliser de bibliothèques externes, considérez l'extrait de code suivant :

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

Dans ce code, les événements clés sont surveillés à l'aide du gestionnaire d'événements onkeydown. Les touches fléchées sont identifiées par leurs valeurs respectives (par exemple, 37 pour la gauche, 39 pour la droite). Pour empêcher les comportements par défaut du navigateur tels que le défilement ou le mouvement du curseur, la méthode PreventDefault() est utilisée.

Supporting IE8

Si vous devez prendre en charge Internet Explorer 8 , qui ne prend pas en charge la propriété which, vous pouvez augmenter le code comme suit :

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event; // IE8 compatibility
    switch(e.which || e.keyCode) {
        // ...
    }
};</code>

Solution moderne : KeyboardEvent.key

Dans les navigateurs modernes, la propriété KeyboardEvent. Which est obsolète. Pour une approche plus à jour de la détection des touches fléchées, vous pouvez utiliser la propriété KeyboardEvent.key à la place :

<code class="javascript">document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowLeft': // left
      break;
    case 'ArrowUp': // up
      break;
    case 'ArrowRight': // right
      break;
    case 'ArrowDown': // down
      break;
    default: return;
  }
});</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!