Lier les touches fléchées en JS/jQuery

Question

Comment faire pour lier une fonction aux touches fléchées gauche et droite en Javascript et/ou jQuery ? J'ai regardé le plugin js-hotkey pour jQuery (il enveloppe la fonction intégrée bind pour ajouter un argument permettant de reconnaître des touches spécifiques), mais il ne semble pas prendre en charge les touches fléchées.

Answer 1

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)
};

Si vous devez supporter IE8, commencez le corps de la fonction comme suit e = e || window.event; switch(e.which || e.keyCode) { .

(edit 2020)
Notez que KeyboardEvent.which est maintenant déprécié. Voir cet exemple utilisant KeyboardEvent.key pour une solution plus moderne de détection des touches fléchées.

Answer 2

$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Codes de caractères :

37 - gauche

38 - haut

39 - droite

40 - en bas

Answer 3

Vous pouvez utiliser le keyCode des touches fléchées (37, 38, 39 et 40 pour gauche, haut, droite et bas) :

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Vérifiez l'exemple ci-dessus aquí .

Answer 4

C'est un peu tard, mais HotKeys a un bug très important qui fait que les événements sont exécutés plusieurs fois si vous attachez plus d'une touche de raccourci à un élément. Utilisez simplement jQuery.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

Answer 5

J'ai simplement combiné les meilleurs éléments des autres réponses :

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});