Comment lier les touches fléchées en JavaScript et jQuery ?

Liaison des touches fléchées en JavaScript

Dans certaines applications, il devient nécessaire de lier certaines fonctions à des touches spécifiques du clavier, comme la touches fléchées. Dans cet article, nous explorerons comment lier les touches fléchées en JavaScript et jQuery, en nous concentrant sur les flèches gauche et droite.

Utilisation de JavaScript standard

La méthode la plus simple pour gérer les événements clés dans Vanilla JavaScript, vous devez utiliser l'écouteur d'événements document.onkeydown. En attachant une fonction à cet événement, nous pouvons vérifier le code clé de la touche enfoncée, qui correspond à la touche physique du clavier. Voici un exemple :

<code class="js">document.onkeydown = function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

Utilisation de jQuery

jQuery offre un moyen plus concis et plus pratique de lier des écouteurs d'événements. Semblable à l'approche précédente, nous pouvons utiliser l'événement keydown pour détecter les pressions sur les touches fléchées :

<code class="js">$(document).on("keydown", function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
});</code>

Compatibilité IE8

Pour les navigateurs comme IE8 qui ne prennent pas en charge la propriété which sur les objets événementiels, on peut utiliser le code suivant :

<code class="js">e = e || window.event;
switch (e.which || e.keyCode) {
  case 37: // Left arrow
    // Do something
    break;

  case 39: // Right arrow
    // Do something else
    break;
}</code>

Note sur les codes clés

Les codes clés utilisés ici (37 et 39) correspondent vers les touches fléchées gauche et droite, respectivement. Vous pouvez trouver des codes de clé pour d'autres clés sur les sites Web officiels de documentation JavaScript ou jQuery.

JavaScript moderne

Dans les versions plus récentes de JavaScript, la propriété which est obsolète en faveur de KeyboardEvent.key. Voici un exemple mis à jour utilisant KeyboardEvent.key :

<code class="js">document.onkeydown = function(e) {
  switch (e.key) {
    case "ArrowLeft": // Left arrow
      // Do something
      break;

    case "ArrowRight": // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

En implémentant ces méthodes, vous pouvez facilement lier des fonctions spécifiques aux touches fléchées gauche et droite, permettant une interaction efficace avec le clavier dans vos applications.

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!