Touches fléchées de liaison dans JS/jQuery

Question

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

Answer 1

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

Mettez votre code personnalisé pour les touches fléchées entre les case et break lignes correspondantes.

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

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

(modifier 2017)
Si vous vous sentez de fantaisie, 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, check here.

Answer 2

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

codes de caractères:

37 - left

38 - up

39 - right

40 - down

Answer 3

Vous pouvez utiliser le code d'activation des touches fléchées (37, 38, 39 et 40 pour la gauche, en haut, à droite et en bas):

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

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

Vérifiez l'exemple ci-dessus here.

Answer 4

Etes-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é gauche, droite, haut et bas fonctionnant quand je l'ai testé dans IE7, Firefox 3.5.2, et Google Chrome 2.0.172 ...

EDIT: It Apparaît jquery.hotkeys a été déplacé vers Github: https://github.com/jeresig/jquery.hotkeys

Answer 5

Ceci est un peu en retard, mais HotKeys a un bogue très important qui provoque l'exécution des événements plusieurs fois si vous attachez plus d'un raccourci à un élément. Utilisez simplement jQuery.

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

Answer 6

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.

Answer 7

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

Answer 8

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/

Answer 9

Une solution laconique en utilisant simplement Javascript (grâce à des améliorations proposées Sygmoral):

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

Voir aussi https://stackoverflow.com/a/17929007/1397061.

Answer 10

Vous pouvez utiliser bind jQuery:

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

Answer 11

Avec café & 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() 

Answer 12

Vous pouvez vérifier wether un arrow key est pressé par:

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

Answer 13

empêchent la flèche uniquement disponible pour les un autre objet SELECT, eh bien en fait je n'ai pas tes sur un autre objet LOL. mais il peut arrêter l'événement de flèche 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 cela change encore la valeur de l'objet. mais l'événement vous dit encore que la flèche a été pressée.

Answer 14

Une bibliothèque Javascript robuste pour saisir 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 
    } 
}); 

Answer 15

Je suis venu ici à la recherche d'un moyen simple de laisser l'utilisateur, lorsqu'elle se concentre sur une entrée, utilisez les touches fléchées pour +1 ou -1 une entrée numérique. Je n'ai jamais trouvé une bonne réponse mais j'ai fait le code suivant qui semble bien fonctionner - en faire 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); 
    } 
}); 

Answer 16

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

      } 
     });