Bindungspfeiltasten in JS / jQuery

Wie binde ich eine Funktion an die linken und rechten Pfeiltasten in Javascript und / oder jQuery? Ich habe mir das js-hotkey-Plugin für jQuery angesehen (umschließt die integrierte Bindefunktion, um ein Argument zum Erkennen bestimmter Schlüssel hinzuzufügen), aber es scheint keine Pfeiltasten zu unterstützen.

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, starten Sie den Funktionskörper als e = e || window.event; switch(e.which || e.keyCode) {.

(Bearbeiten 2020)
Beachten Sie, dass dies KeyboardEvent.whichjetzt veraltet ist. In diesem Beispiel finden SieKeyboardEvent.key eine modernere Lösung zum Erkennen von Pfeiltasten.

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

Zeichencodes:

37 - links

38 - auf

39 - richtig

40 - runter

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

Überprüfen Sie das obige Beispiel hier .

Dies ist etwas spät, aber HotKeys hat einen sehr schwerwiegenden Fehler, der dazu führt, dass Ereignisse mehrmals ausgeführt werden, wenn Sie mehr als einen Hotkey an ein Element anhängen. Verwenden Sie einfach jQuery.

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

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

Sie können KeyboardJS verwenden. Ich habe die Bibliothek für solche Aufgaben geschrieben.

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

Kasse der Bibliothek hier => http://robertwhurst.github.com/KeyboardJS/

Eine knappe Lösung mit einfachem Javascript (danke an Sygmoral für die vorgeschlagenen Verbesserungen):

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

Siehe auch https://stackoverflow.com/a/17929007/1397061 .

Sind Sie sicher, dass jQuery.HotKeys die Pfeiltasten nicht unterstützt? Ich habe schon früher mit ihrer Demo herumgespielt und beobachtet, wie links, rechts, oben und unten funktioniert, als ich sie in IE7, Firefox 3.5.2 und Google Chrome 2.0.172 getestet habe ...

EDIT : Es scheint , jquery.hotkeys wurde Github verlegt: https://github.com/jeresig/jquery.hotkeys

Anstatt return false;wie in den obigen Beispielen zu verwenden, können Sie verwenden, e.preventDefault();was dasselbe tut, aber leichter zu verstehen und zu lesen ist.

Beispiel für reines js mit rechts oder links

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

Sie können jQuery bind verwenden:

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

Sie können überprüfen, ob ein arrow keygedrückt wird von:

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

Verhindern Sie, dass der Pfeil nur für ein anderes Objekt verfügbar ist. SELECT, nun, ich habe noch keine Tests für ein anderes Objekt LOL. Es kann jedoch das Pfeilereignis auf Seite und Eingabetyp stoppen.

Ich versuche bereits, den Pfeil nach links und rechts zu blockieren, um den Wert des SELECT-Objekts mit "e.preventDefault ()" oder "return false" bei "kepress", "keydown" und "keyup" zu ändern, aber es ändert immer noch den Objektwert. Aber das Ereignis sagt Ihnen immer noch, dass der Pfeil gedrückt wurde.

Eine robuste Javascript-Bibliothek zum Erfassen von Tastatureingaben und eingegebenen Tastenkombinationen. Es hat keine Abhängigkeiten.

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

Ich bin hierher gekommen, um nach einer einfachen Möglichkeit zu suchen, wie der Benutzer, wenn er sich auf eine Eingabe konzentriert, die Pfeiltasten verwenden kann, um eine numerische Eingabe mit +1 oder -1 zu versehen. Ich habe nie eine gute Antwort gefunden, aber den folgenden Code erstellt, der großartig zu funktionieren scheint.

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

Mit Kaffee & 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()