web-dev-qa-db-fra.com

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

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

javascriptjquerykeyboardkey-bindings
405
Alex S
_$(document).keydown(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)
});
_

Placez votre code personnalisé pour les touches de direction entre les lignes case et break correspondantes.

e.which est normalisé par jQuery, il fonctionne donc dans tous les navigateurs. Pour une approche purement javascript, remplacez les deux premières lignes par:

_document.onkeydown = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
_


(édition 2017)
Si vous en avez envie, vous pouvez utiliser e.key au lieu de _e.which_ ou _e.keyCode_ maintenant. _e.key_ devient une norme recommandée, vous permettant de vérifier par rapport aux chaînes: _'ArrowLeft'_, _'ArrowUp'_, _'ArrowRight'_, _'ArrowDown'_. Les nouveaux navigateurs le supportent nativement, cochez ici .

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

Codes de caractère:

37 - à gauche

38 - en haut

39 - droit

40 - en baisse

447
Josh

Vous pouvez utiliser le code clé des touches de direction (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 .

104
CMS

Ceci est un peu en retard, mais HotKeys a un bogue très important qui provoque l'exécution d'événements à plusieurs reprises 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();
    }
});
23
mackstann

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

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

Commander la bibliothèque ici => http://robertwhurst.github.com/KeyboardJS/

14
Robert Hurst

Une solution laconique en 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 .

12
1''

Etes-vous sûr que jQuery.HotKeys ne supporte pas les flèches? Je me suis amusé avec leur démo avant et ai observé à gauche, à droite, en haut et en bas de travailler lorsque je l'ai testé dans IE7, Firefox 3.5.2 et Google Chrome 2.0.172 ...

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

9
Pandincus

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

5
Gaetan

Exemple de js pur 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) {

            }
        });
4
Vince Verhoeven

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

Vous pouvez vérifier si un arrow key est appuyé par:

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

Une bibliothèque Javascript robuste pour capturer les entrées au clavier et les combinaisons de touches entrées. 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 permettre à l'utilisateur, lorsqu'il est concentré sur une entrée, d'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 le code suivant, qui semble fonctionner parfaitement, est désormais accessible à l'ensemble du site.

$("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);
    }
});
0
Scott

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

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

0
phoenixs