jQuery-Tastendruck-Pfeiltasten

73

Ich versuche, Pfeiltasten in jQuery zu erfassen, aber es werden keine Ereignisse ausgelöst.

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

Dies generiert Ereignisse für alphanumerische Schlüssel, aber Löschen, Pfeiltasten usw. erzeugen kein Ereignis.

Was mache ich falsch, um diese nicht zu erfassen?

javascript jquery keypress

— RedBassett
quelle

181

Sie sollten verwenden, .keydown()weil .keypress()"Pfeile" ignoriert wird, um die Verwendung des Schlüsseltyps zu erfassene.which

Drücken Sie auf den Ergebnisbildschirm, um zu fokussieren (unten rechts auf dem Geigenbildschirm), und drücken Sie dann die Pfeiltasten, um zu sehen, ob es funktioniert.

Anmerkungen:

.keypress()wird niemals mit Shift, Esc und Delete ausgelöst, sondern .keydown()wird.
Tatsächlich wird .keypress()in einigen Browsern durch Pfeiltasten ausgelöst, aber es ist nicht browserübergreifend, so dass es zuverlässiger zu verwenden ist .keydown().

Weitere nützliche Informationen

Sie können .whichOder .keyCodedes Ereignisobjekts verwenden - Einige Browser unterstützen keinen von ihnen, aber bei Verwendung von jQuery ist es sicher, beide zu verwenden, da jQuery die Dinge standardisiert. (Ich hatte lieber .whichnie ein Problem mit).
Um einen ctrl | alt | shift | METADruck mit der tatsächlich erfassten Taste zu erkennen, sollten Sie die folgenden Eigenschaften des Ereignisobjekts überprüfen: Sie werden auf TRUE gesetzt, wenn sie gedrückt wurden:
- event.ctrlKey - Strg
- event.altKey - alt
- event.shiftKey - Verschiebung
- event.metaKey - META ( Befehl ⌘ ODER Windows-Taste )
Schließlich - hier sind einige nützliche Schlüsselcodes (Für eine vollständige Liste - Schlüsselcode -Cheatsheet ):
- Geben Sie ein: 13
- Up: 38
- Unten: 40
- Rechts: 39
- Links: 37
- Esc: 27
- Leertaste: 32
- Strg: 17
- Alt: 18
- Schicht: 16

— Shlomi Hassid
quelle

6

Ja, die Information, dass der Tastendruck "Pfeile" ignoriert, ist sehr nützlich. Vielen Dank

— Hoang Le

1

@Isaac Große Ergänzung bearbeitet die Antwort +1 - Beachten Sie, dass es auch der Windows-Befehlstaste zugeordnet wird. Vielen Dank.

— Shlomi Hassid

Wenn Sie die Taste gedrückt halten, wird die Seite leider gescrollt. Fügen Sie dem Ereignis ein PreventDefault () hinzu, um dies zu verhindern.

— JSON

28

$(document).keydown(function(e) {
    console.log(e.keyCode);
});

Tastendruckereignisse erkennen Pfeiltasten, jedoch nicht in allen Browsern. Es ist also besser, Keydown zu verwenden.

Dies sind Schlüsselcodes, die Sie in Ihrem Konsolenprotokoll erhalten sollten:

links = 37
up = 38
rechts = 39
down = 40

— Harsha Venkatram
quelle

Bei Chrom funktioniert es bei mir nicht. Keydown funktioniert Zitiert aus api.jquery.com/keypress Beachten Sie, dass Keydown und Keyup einen Code enthalten, der angibt, welche Taste gedrückt wird, während Tastendruck angibt, welches Zeichen eingegeben wurde. Beispielsweise wird ein Kleinbuchstabe "a" durch Tastendruck und Tastendruck als 65, durch Tastendruck jedoch als 97 gemeldet. Ein Großbuchstabe "A" wird von allen Ereignissen als 65 gemeldet. Aufgrund dieser Unterscheidung ist .keydown () oder .keyup () die bessere Wahl, wenn Sie spezielle Tastenanschläge wie Pfeiltasten abfangen.

— Harsha Venkatram

2

Der Tastendruck kann in einigen Browsern mit Pfeiltasten ausgelöst werden. Sie haben Recht, in anderen Browsern verhält er sich jedoch anders. Daher ist es viel besser, Keydown zu verwenden.

— Shlomi Hassid

Ich habe nicht erwähnt, dass ich dies nur auf Firefox getestet habe. Und nein, keypresszeigt mir 40 und 38 genau wie keydown.

— Christian Heinrichs

8

Sie können überprüfen, ob eine Pfeiltaste gedrückt wird durch:

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

jsfiddle Demo

— suhailvs
quelle

4

left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

});

— Bhaskara Arani
quelle

Danke für Ihre Antwort. Um dies zu einer brauchbaren Antwort zu machen, sollten Sie eine Erklärung hinzufügen, was Ihr Code-Snippet tut, warum es korrekt ist und was ich in der ersten Frage falsch gemacht habe.

— RedBassett

$ ('html') ändere es in $ (document) und ändere den Tastendruck in keydown

— Bhaskara Arani

2

Bitte beziehen Sie sich auf den Link von JQuery

http://api.jquery.com/keypress/

Es sagt

Das Tastendruckereignis wird an ein Element gesendet, wenn der Browser Tastatureingaben registriert. Dies ähnelt dem Keydown-Ereignis, mit der Ausnahme, dass Modifikator- und nicht druckbare Tasten wie Shift, Esc und Delete Keydown-Ereignisse auslösen, jedoch keine Tastendruckereignisse. Je nach Plattform und Browser können andere Unterschiede zwischen den beiden Ereignissen auftreten.

Das heißt, Sie können bei Pfeilen keinen Tastendruck verwenden.

— Tatha
quelle

0

$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}

— Bharath Mb
quelle