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.
Antworten
Zu viele Anzeigen?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.
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í .
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();
}
});
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();
});
- See previous answers
- Weitere Antworten anzeigen