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


418

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.


Réponses:


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


28
De loin la meilleure réponse. Des utilisations e.whichcomme jQuery le recommande pour les navigateurs croisés, des utilisations à la e.preventDefault()place de return false( return falsesur un gestionnaire d'événements jQuery déclenche les deux e.preventDefault()et e.stopPropagation(), dont le second va entraîner l'échec des événements ajoutés ultérieurement car l'événement ne se propage pas vers eux), et au fin du commutateur, retournera sans appeler e.preventDefault()s'il s'agit d'une autre clé que celles recherchées pour ne pas entraver l'utilisation des autres clés, et au lieu de $.ui.keyCode.DOWNcela, elle se compare aux nombres (BEAUCOUP plus rapidement).
Jimbo Jonny

2
Nathan: il semble que tous les codes clés ne soient pas cohérents entre les navigateurs, mais les touches fléchées sont certaines de celles qui le sont. Voir ici: stackoverflow.com/questions/5603195/…
Sygmoral

1
@MichaelScheper - 1) variables! = Constantes, qu'elles soient ou non destinées à être modifiées ... le moteur doit toujours les traiter comme des variables jusqu'à ce que les constantes ES6 soient suffisamment omniprésentes pour que jQuery puisse utiliser des constantes 2) les nombres ne le sont pas des nombres vraiment magiques quand il y a un commentaire juste à côté d'eux disant exactement ce qu'ils sont, et 3) ... suite
Jimbo Jonny

2
... 3) lorsque $.ui.keyCode.DOWNvous accédez $à votre recherche dans votre portée lexicale, ne la trouvez pas, montez d'un niveau ... recherchez $, répétez jusqu'à dans la portée globale, trouvez-la sur la portée globale window, accédez $à la fenêtre, accédez uià window.$, accédez keyCodeà window.$.ui, accédez DOWNà window.$.ui.keyCodepour obtenir la valeur primitive que vous souhaitez comparer, puis effectuez votre comparaison réelle. Que la vitesse soit importante ou non pour vous est une décision personnelle, j'ai juste tendance à éviter 4 niveaux d'accès quand il y a une situation où je peux tout aussi facilement écrire / commenter la primitive.
Jimbo Jonny

1
@NathanArthur Ici, j'ai trouvé deux bons outils en ligne pour tester les codes clavier: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Riccardo Volpe

451
$(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


4
Y a-t-il un but pour le retour?
Alex S

19
Il arrête tout autre événement de keydown.
s_hewitt

9
Ombre: non, il signifie que cela empêche l'événement de
keydown

3
Sauf que 39 est aussi une apostrophe, n'est-ce pas?
Paul D. Waite

25
Lorsque vous utilisez jQuery, utilisez e.whichplutôt que e.keyCodepour plus de prise en charge du navigateur. Voir mon commentaire ci-dessous.
Sygmoral

108

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 .


1
Je ne suis pas sûr de votre utilisation du || opérateur à la ligne 2. Une valeur autre que zéro ou une mise en œuvre différente de zéro n'est-elle pas spécifique et n'est-elle pas garantie? J'utiliserais quelque chose de plus comme: var keyCode = (e.keyCode? E.keyCode: e.which); +1 pour l'utilisation de l'objet flèche pour donner aux cas des noms lisibles.
Mnebuerquo

6
Si vous utilisez jQuery, vous n'avez pas besoin de tester e.which: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM

J'essaie de mettre un écouteur d'événement clé sur une table, mais cela ne fonctionnerait pas. Existe-t-il un nombre limité de types de sélecteurs qui prennent en charge les principaux écouteurs d'événements?
Arman Bimatov

23

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

2
+1 pour utiliser l'objet ui keycode. Beaucoup plus facile à comprendre que 37, 38, 39 ou 40. Je ne sais pas pourquoi la première réponse utilise e.keyCode lorsque la documentation jQuery indique explicitement d'utiliser e.which pour tenir compte des différences de navigateur. Espérons que cette réponse sera mieux reconnue pour avoir bien fait les choses.
Aucun

2
L'utilisation de $ .ui.keyCode.DOWN à chaque pression de touche est beaucoup plus lente que l'utilisation du numéro. Ajoutez simplement un commentaire si vous vous souciez de la clarté, d'autant plus qu'il doit être exécuté à chaque fois que vous appuyez sur une touche.
Jimbo Jonny

16

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

1
D'où vient "ui"? Obtenir "TypeError: $ .ui n'est pas défini" EDIT - Il me manquait l'interface utilisateur JQuery. Je l'ai chargé - plus d'erreur.
un codeur

3
Il utilise apparemment aussi jQuery UI qui doit avoir cette énumération. Je n'inclurais pas jQuery UI juste pour ça, btw.
Jethro Larson

14

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/


14

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 .


Probablement aussi une valeur de liaison viadocument.addEventListener('keydown', myFunction);
nathanbirrell

9

Ê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


Je lisais où il a dit qu'il était basé sur une autre bibliothèque et j'ai supposé que la liste des clés prises en charge s'appliquait toujours.
Alex S

5

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.


4
return false;et e.preventDefault();ne sont pas exactement les mêmes. Voir stackoverflow.com/a/1357151/607874
Jose Rui Santos

4

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) {

            }
        });

3

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

2

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

0

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.


0

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

0

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

-1

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()
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.