Bindungspfeiltasten in JS / jQuery

418

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.

Alex S.
quelle

Antworten:

541
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.

Sygmoral
quelle
28
Mit Abstand beste Antwort. Verwendungen e.whichwie jQuery empfehlen für browserübergreifende Verwendungen e.preventDefault()anstelle von return false( return falsebei einem jQuery-Ereignishandler werden beide e.preventDefault()und ausgelöst e.stopPropagation(), wobei die zweite dazu führt, dass später hinzugefügte Ereignisse fehlschlagen, da das Ereignis nicht an sie weitergegeben wird) und am Das Ende des Schalters wird ohne Aufruf zurückgegeben, e.preventDefault()wenn es sich um einen anderen Schlüssel handelt als den, nach dem gesucht wird, um die Verwendung anderer Schlüssel nicht zu behindern. Stattdessen wird $.ui.keyCode.DOWNer mit den Nummern verglichen (VIEL schneller).
Jimbo Jonny
2
Nathan: Es scheint, dass nicht alle Schlüsselcodes unter den Browsern konsistent sind, aber die Pfeiltasten sind einige von denen, die es sind. Siehe hier: stackoverflow.com/questions/5603195/…
Sygmoral
1
@MichaelScheper - 1) Variablen! = Konstanten, unabhängig davon, ob sie geändert werden sollen oder nicht ... Die Engine muss sie immer noch wie Vars behandeln, bis die ES6-Konstanten so allgegenwärtig sind, dass jQuery Konstanten verwenden kann. 2) Zahlen nicht wirklich magische Zahlen, wenn es einen Kommentar direkt neben ihnen gibt, der genau sagt, was sie sind, und 3) ... Fortsetzung
Jimbo Jonny
2
... 3) Wenn $.ui.keyCode.DOWNSie $in Ihrem lexikalischen Bereich darauf zugreifen , suchen Sie es, finden es nicht, steigen eine Ebene auf ... suchen $, wiederholen, bis im globalen Bereich, finden Sie es im globalen Bereich window, Zugriff $auf Fenster, Zugriff uiauf window.$, Zugriff keyCodeauf window.$.ui, greifen Sie DOWNauf window.$.ui.keyCodezu, um zu dem primitiven Wert zu gelangen, den Sie vergleichen möchten, und führen Sie dann Ihren tatsächlichen Vergleich durch. Ob diese Geschwindigkeit für Sie wichtig ist oder nicht, ist eine persönliche Entscheidung. Ich habe nur die Tendenz, 4 Zugriffsebenen zu vermeiden, wenn es eine Situation gibt, in der ich das Grundelement genauso einfach schreiben / kommentieren kann.
Jimbo Jonny
1
@ NathanArthur Hier fand ich zwei gute Online-Tools zum Testen der Tastatur-Schlüsselcodes: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Riccardo Volpe
451
$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Zeichencodes:

37 - links

38 - auf

39 - richtig

40 - runter

Josh
quelle
4
Gibt es einen Zweck für die Rückgabe?
Alex S
19
Es verhindert, dass weitere Keydown-Ereignisse getroffen werden.
s_hewitt
9
Shadow: Nein, er meint, es verhindert, dass das Keydown-Ereignis auf andere DOM-Elemente
ausgelöst wird
3
Außer 39 ist auch Apostroph, nicht wahr?
Paul D. Waite
25
Verwenden Sie bei Verwendung von jQuery e.whicheher als e.keyCodefür mehr Browserunterstützung. Siehe meinen Kommentar unten.
Sygmoral
108

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 .

CMS
quelle
1
Ich bin mir nicht sicher, ob Sie das || verwenden Operator in Zeile 2. Ist ein anderer Wert als Null oder eine Implementierung ungleich Null nicht spezifisch und nicht garantiert? Ich würde eher etwas verwenden wie: var keyCode = (e.keyCode? E.keyCode: e.which); +1 für die Verwendung des Pfeilobjekts, um den Fällen lesbare Namen zu geben.
Mnebuerquo
6
Wenn Sie jQuery verwenden, müssen Sie nicht auf Folgendes testen: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM
Ich versuche, einen Key Event Listener auf einen Tisch zu stellen, aber es würde nicht funktionieren. Gibt es eine begrenzte Anzahl von Auswahltypen, die wichtige Ereignis-Listener unterstützen?
Arman Bimatov
23

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();
    }
});
Mackstann
quelle
2
+1 für die Verwendung des UI-Keycode-Objekts. Viel einfacher zu verstehen als 37, 38, 39 oder 40. Nicht sicher, warum die Top-Antwort e.keyCode verwendet, wenn in der jQuery-Dokumentation ausdrücklich angegeben ist, e.which zu verwenden, um Browserunterschiede zu berücksichtigen. Hoffentlich wird diese Antwort mehr dafür anerkannt, dass sie richtig gemacht wurde.
Keine
2
Die Verwendung von $ .ui.keyCode.DOWN bei jedem Tastendruck ist viel langsamer als die Verwendung der Zahl. Fügen Sie einfach einen Kommentar hinzu, wenn Sie sich Sorgen um die Klarheit machen, zumal er jedes Mal ausgeführt werden muss, wenn eine Taste gedrückt wird.
Jimbo Jonny
16

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();
});
matte Verbrennungen
quelle
1
Woher kommt "ui"? "TypeError: $ .ui ist undefiniert" BEARBEITEN - Ich habe die JQuery-Benutzeroberfläche vermisst. Habe das geladen - kein Fehler mehr.
Ein Codierer
3
Er verwendet anscheinend auch die jQuery-Benutzeroberfläche, die diese Aufzählung haben muss. Ich würde jQuery UI nicht nur dafür einschließen, übrigens.
Jethro Larson
14

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/

Robert Hurst
quelle
14

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 .

1 ''
quelle
Wahrscheinlich auch eine Bindung wert überdocument.addEventListener('keydown', myFunction);
Nathanbirrell
9

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

Pandincus
quelle
Ich habe gelesen, wo es heißt, dass es auf einer anderen Bibliothek basiert, und angenommen, dass die Liste der unterstützten Schlüssel immer noch angewendet wird.
Alex S
5

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.

Gaetan
quelle
4
return false;und e.preventDefault();sind nicht genau das gleiche. Siehe stackoverflow.com/a/1357151/607874
Jose Rui Santos
4

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

            }
        });
Vince Verhoeven
quelle
3

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');
    }
});
Alessandro Pirovano
quelle
2

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;
    }
});
suhailvs
quelle
0

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.

Phönixe
quelle
0

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
    }
});
小弟 调 调
quelle
0

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);
    }
}); 
Scott
quelle
-1

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()
Philip
quelle