439 Stimmen

Bindung von Pfeiltasten in JS/jQuery

Wie gehe ich über die Bindung einer Funktion auf die linke und rechte Pfeiltasten in Javascript und / oder jQuery? Ich schaute auf die js-Hotkey-Plugin für jQuery (wickelt die eingebaute Funktion binden, um ein Argument hinzufügen, um bestimmte Tasten zu erkennen), aber es scheint nicht Pfeiltasten zu unterstützen.

567voto

Sygmoral Punkte 6843
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)
};

Wenn Sie IE8 unterstützen müssen, beginnen Sie den Funktionskörper als e = e || window.event; switch(e.which || e.keyCode) { .

(edit 2020)
Beachten Sie, dass KeyboardEvent.which ist jetzt veraltet. Siehe dieses Beispiel mit KeyboardEvent.key für eine modernere Lösung zur Erkennung von Pfeiltasten.

465voto

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

Zeichencodes:

37 - links

38 - aufwärts

39 - rechts

40 - nach unten

109voto

Christian C. Salvadó Punkte 763569

Sie können den keyCode der Pfeiltasten verwenden (37, 38, 39 und 40 für links, oben, rechts und unten):

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

Prüfen Sie das obige Beispiel aquí .

23voto

mackstann Punkte 1187

Dies ist ein bisschen spät, aber HotKeys hat einen sehr großen Fehler, der dazu führt, dass Ereignisse mehrfach ausgeführt werden, wenn Sie mehr als einen Hotkey mit einem Element verbinden. Verwenden Sie einfach nur jQuery.

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

16voto

matt burns Punkte 23443

Ich habe einfach die besten Teile aus den anderen Antworten kombiniert:

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

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X