Liaison des touches fléchées dans JS / jQuery

Comment puis-je 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 (encapsule la fonction de liaison intégrée pour ajouter un argument pour reconnaître des clés spécifiques), mais il ne semble pas prendre en charge les touches fléchées.

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 prendre en charge IE8, démarrez le corps de la fonction en tant que e = e || window.event; switch(e.which || e.keyCode) {.

(modifier 2020)
Notez qu'il KeyboardEvent.whichest désormais obsolète. Voir cet exemple en utilisantKeyboardEvent.key une solution plus moderne pour détecter les touches fléchées.

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

Codes de caractères:

37 - gauche

38 - jusqu'à

39 - à droite

40 - vers le bas

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 ici .

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

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

J'ai simplement combiné les meilleurs morceaux 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();
});

Vous pouvez utiliser KeyboardJS. J'ai écrit la bibliothèque pour des tâches comme celle-ci.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Découvrez la bibliothèque ici => http://robertwhurst.github.com/KeyboardJS/

Une solution laconique utilisant du Javascript simple (merci à Sygmoral pour les améliorations suggérées):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Voir également https://stackoverflow.com/a/17929007/1397061 .

Êtes-vous sûr que jQuery.HotKeys ne prend pas en charge les touches fléchées? J'ai déjoué leur démo avant et j'ai observé que la gauche, la droite, le haut et le bas fonctionnaient quand je l'ai testée dans IE7, Firefox 3.5.2 et Google Chrome 2.0.172 ...

EDIT : Il semble que jquery.hotkeys a été déplacé vers Github: https://github.com/jeresig/jquery.hotkeys

Au lieu d'utiliser return false;comme dans les exemples ci-dessus, vous pouvez utiliser e.preventDefault();ce qui fait la même chose mais est plus facile à comprendre et à lire.

Exemple de js purs avec aller à droite ou à gauche

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

Vous pouvez utiliser jQuery bind:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

Vous pouvez vérifier si vous arrow keyappuyez sur:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});

empêcher la flèche disponible uniquement pour tout autre objet SELECT, eh bien en fait je n'ai pas de test sur un autre objet LOL. mais il peut arrêter l'événement flèche sur la page et le type d'entrée.

j'essaie déjà de bloquer la flèche gauche et droite pour changer la valeur de l'objet SELECT en utilisant "e.preventDefault ()" ou "return false" sur "kepress" "keydown" et "keyup" événement mais cela change toujours la valeur de l'objet. mais l'événement vous dit toujours que la flèche a été enfoncée.

Une bibliothèque Javascript robuste pour capturer les saisies au clavier et les combinaisons de touches saisies. Il n'a pas de dépendances.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

Je suis venu ici à la recherche d'un moyen simple de laisser l'utilisateur, lorsqu'il se concentre sur une entrée, utiliser les touches fléchées pour +1 ou -1 une entrée numérique. Je n'ai jamais trouvé de bonne réponse, mais j'ai créé le code suivant qui semble fonctionner à merveille - ce qui rend tout le site maintenant.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

Avec café et Jquery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()