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.
javascript
jquery
keyboard
key-bindings
Alex S.
quelle
quelle
Antworten:
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.which
jetzt veraltet ist. In diesem Beispiel finden SieKeyboardEvent.key
eine modernere Lösung zum Erkennen von Pfeiltasten.quelle
e.which
wie jQuery empfehlen für browserübergreifende Verwendungene.preventDefault()
anstelle vonreturn false
(return false
bei einem jQuery-Ereignishandler werden beidee.preventDefault()
und ausgelöste.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.DOWN
er mit den Nummern verglichen (VIEL schneller).$.ui.keyCode.DOWN
Sie$
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 Bereichwindow
, Zugriff$
auf Fenster, Zugriffui
aufwindow.$
, ZugriffkeyCode
aufwindow.$.ui
, greifen SieDOWN
aufwindow.$.ui.keyCode
zu, 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.Zeichencodes:
quelle
e.which
eher alse.keyCode
für mehr Browserunterstützung. Siehe meinen Kommentar unten.Sie können den keyCode der Pfeiltasten verwenden (37, 38, 39 und 40 für links, oben, rechts und unten):
Überprüfen Sie das obige Beispiel hier .
quelle
The event.which property normalizes event.keyCode and event.charCode
- api.jquery.com/event.whichDies 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.
quelle
Ich habe einfach die besten Teile aus den anderen Antworten kombiniert:
quelle
Sie können KeyboardJS verwenden. Ich habe die Bibliothek für solche Aufgaben geschrieben.
Kasse der Bibliothek hier => http://robertwhurst.github.com/KeyboardJS/
quelle
Eine knappe Lösung mit einfachem Javascript (danke an Sygmoral für die vorgeschlagenen Verbesserungen):
Siehe auch https://stackoverflow.com/a/17929007/1397061 .
quelle
document.addEventListener('keydown', myFunction);
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
quelle
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.quelle
return false;
unde.preventDefault();
sind nicht genau das gleiche. Siehe stackoverflow.com/a/1357151/607874Beispiel für reines js mit rechts oder links
quelle
Sie können jQuery bind verwenden:
quelle
Sie können überprüfen, ob ein
arrow key
gedrückt wird von:quelle
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.
quelle
Eine robuste Javascript-Bibliothek zum Erfassen von Tastatureingaben und eingegebenen Tastenkombinationen. Es hat keine Abhängigkeiten.
http://jaywcjlove.github.io/hotkeys/
quelle
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.
quelle
Mit Kaffee & Jquery
quelle