Touches fléchées reliées dans JS / jQuery

$(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 fléchées entre le case correspondant et les lignes de break .

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

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

(Modifier 2017)
Si vous vous sentez chic, 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 contre les chaînes: 'ArrowLeft' , 'ArrowUp' , 'ArrowRight' , 'ArrowDown' . Les nouveaux navigateurs le supportent de manière native, vérifiez ici .

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

Codes de caractères:

37 – à gauche

38 – up

39 – à droite

40 – vers le bas

Vous pouvez utiliser la toucheCode des touches fléchées (37, 38, 39 et 40 pour gauche, haut, droite et vers le 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; } }); 

Consultez l'exemple ci-dessus ici .

C'est un peu tard, mais HotKeys a un bug très important qui entraîne l'exécution d'événements plusieurs fois si vous attachez plus d'une touche d'accès rapide à 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 bits 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'); }); 

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

Ê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é à gauche, à droite, en haut et en bas fonctionnant lorsque je l'ai testé dans IE7, Firefox 3.5.2 et Google Chrome 2.0.172 …

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

Une solution concise en utilisant Javascript simple (grâce à 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 aussi https://stackoverflow.com/a/17929007/1397061 .

Au lieu d'utiliser le 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.

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 une arrow key est enfoncée par:

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

Empêcher la flèche uniquement disponible pour tout autre objet SELECT, bien, en fait, je n'ai pas eu sur un autre objet LOL. Mais il peut arrêter l'événement de flèche sur la page et le type de saisie.

J'ai déjà essayé de bloquer la flèche vers la gauche et vers la droite pour modifier la valeur de l'objet SELECT en utilisant "e.preventDefault ()" ou "return false" sur "kepress" "keydown" et "keyup", mais il modifie toujours la valeur de l'objet. Mais l'événement vous dit toujours que la flèche a été pressée.

Une bibliothèque Javascript robuste pour capturer l'entrée du clavier et les combinaisons de touches saisies. Il n'y 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 chercher un moyen simple de laisser l'utilisateur, lorsqu'il est concentré sur une entrée, utiliser 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 fonctionner génial, ce qui rend ce site complet 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); } }); 

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

Avec le 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()