javascript - Legarea tastelor săgeată în JS/jQuery

Cum pot lega o funcție de tastele săgeată stânga și dreapta în Javascript și/sau jQuery? Am analizat pluginul js-hotkey pentru jQuery (înfășoară funcția bind încorporată pentru a adăuga un argument pentru a recunoaște tastele specifice), dar se pare că nu acceptă tastele săgeată.

Răspuns #1

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

Dacă trebuie să susții IE8, începe corpul funcției astfel: e=e || window.event; switch(e.which || e.keyCode) {.

(editare 2020)
Rețineți că KeyboardEvent.which este acum învechit. Vezi acest exemplu folosind KeyboardEvent.key pentru o soluție mai modernă de a detecta tastele săgeți.

Răspuns #2

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

Coduri de caractere:

37 - stânga

38 - în sus

39 - dreapta

40 - jos

Răspunsul #3

Poți folosi keyCode-ul săgeților (37, 38, 39 și 40 pentru stânga, sus, dreapta și jos):

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

Verifică exemplul de mai sus aici.

Răspunsul #4

Acesta este puțin târziu, dar HotKeys are un bug foarte mare care determină evenimentele să fie executate de mai multe ori dacă atașezi mai multe taste rapide unui element. Folosește pur și simplu jQuery.

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

Răspunsul #5

Am combinat pur și simplu cele mai bune părți din celelalte răspunsuri:

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

Răspuns #6

Poți folosi KeyboardJS. Am scris biblioteca pentru sarcini tocmai ca aceasta.

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

Verifică biblioteca aici => http://robertwhurst.github.com/KeyboardJS/

Răspunsul #7

O soluție concisă folosind Javascript simplu (mulțumiri lui Sygmoral pentru sugestiile de îmbunătățire):

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

De asemenea, vezi https://stackoverflow.com/a/17929007/1397061.