.keyCode vs. .which

Ich dachte, dies würde irgendwo auf Stack Overflow beantwortet, aber ich kann es nicht finden.

Wenn ich auf ein Tastendruckereignis warte, sollte ich verwenden .keyCodeoder .whichfeststellen, ob die Eingabetaste gedrückt wurde?

Ich habe immer so etwas gemacht:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

Aber ich sehe Beispiele, die .whichanstelle von verwenden .keyCode. Was ist der Unterschied? Ist einer browserübergreifender als der andere?

Hinweis: Die folgende Antwort wurde im Jahr 2010 geschrieben. Hier viele Jahre später werden beide keyCodeund whichzugunsten von key(für den logischen Schlüssel) und code(für die physische Platzierung des Schlüssels) veraltet . Beachten Sie jedoch, dass der IE keine Unterstützung codebietet und die Unterstützung für keyeine ältere Version der Spezifikation basiert und daher nicht ganz korrekt ist. Während ich dies schreibe, wird der aktuelle Edge, der auf EdgeHTML und Chakra basiert, ebenfalls nicht unterstützt code, aber Microsoft führt seinen Blink- und V8- basierten Ersatz für Edge ein, der dies vermutlich tut / wird.

Einige Browser verwenden keyCode, andere verwenden which.

Wenn Sie jQuery verwenden, können Sie es zuverlässig verwenden, whichda jQuery die Dinge standardisiert . Mehr hier.

Wenn Sie jQuery nicht verwenden, können Sie Folgendes tun:

var key = 'which' in e ? e.which : e.keyCode;

Oder alternativ:

var key = e.which || e.keyCode || 0;

... die die Möglichkeit behandelt, die e.whichmöglicherweise besteht 0(indem Sie diese 0am Ende mithilfe des merkwürdig leistungsstarken ||Operators von JavaScript wiederherstellen ).

jQuery Normalisiert event.whichje nachdem , ob event.which, event.keyCodeoder event.charCodewird vom Browser unterstützt:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

Ein zusätzlicher Vorteil von .whichist, dass jQuery dies auch für Mausklicks tut:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

Wenn Sie in Vanille-Javascript bleiben, beachten Sie bitte, dass keyCode jetzt veraltet ist und gelöscht wird:

Diese Funktion wurde aus den Webstandards entfernt. Obwohl einige Browser dies möglicherweise noch unterstützen, wird es gerade gelöscht. Vermeiden Sie die Verwendung und aktualisieren Sie den vorhandenen Code nach Möglichkeit. Informationen zu Ihrer Entscheidung finden Sie in der Kompatibilitätstabelle unten auf dieser Seite. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktioniert

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Verwenden Sie stattdessen entweder: .key oder .code, je nachdem, welches Verhalten Sie möchten: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Beide sind in modernen Browsern implementiert.

Schauen Sie sich das an: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

In einem Tastendruckereignis wird der Unicode-Wert der gedrückten Taste entweder in der Eigenschaft keyCode oder charCode gespeichert, niemals in beiden. Wenn die gedrückte Taste ein Zeichen erzeugt (z. B. 'a'), wird charCode auf den Code dieses Zeichens gesetzt, wobei die Groß- und Kleinschreibung berücksichtigt wird. (dh charCode berücksichtigt, ob die Umschalttaste gedrückt gehalten wird). Andernfalls wird der Code der gedrückten Taste in keyCode gespeichert. keyCode wird immer in den Keydown- und Keyup-Ereignissen festgelegt. In diesen Fällen wird charCode niemals festgelegt. Um den Code des Schlüssels unabhängig davon abzurufen, ob er in keyCode oder charCode gespeichert wurde, fragen Sie die Eigenschaft which ab. Über einen IME eingegebene Zeichen werden nicht über keyCode oder charCode registriert.

Ich würde event.keyderzeit empfehlen . MDN-Dokumente: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodeund event.whichbeide haben böse veraltete Warnungen oben auf ihren MDN-Seiten:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / which

Für alphanumerische Schlüssel event.keyscheint in allen Browsern identisch implementiert zu sein. Für Steuerschlüssel (Tab, Eingabe, Escape usw.) gilt event.keyfür Chrome / FF / Safari / Opera derselbe Wert, in IE10 / 11 / Edge jedoch ein anderer Wert (IEs verwenden anscheinend eine ältere Version der Spezifikation, stimmen jedoch überein vom 14. Januar 2018).

Für alphanumerische Schlüssel würde ein Scheck ungefähr so ​​aussehen:

event.key === 'a'

Für Steuerzeichen müssten Sie Folgendes tun:

event.key === 'Esc' || event.key === 'Escape'

Ich habe das Beispiel hier verwendet, um es in mehreren Browsern zu testen (ich musste es in Codepen öffnen und bearbeiten, damit es mit IE10 funktioniert): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ Code

event.code wird in einer anderen Antwort als eine Möglichkeit erwähnt, aber IE10 / 11 / Edge implementiert es nicht, so dass es aus ist, wenn Sie IE-Unterstützung wünschen.

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

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

Hotkeys versteht die folgenden Modifikatoren: ⇧, shift, option, ⌥, alt, ctrl, control, command, und ⌘.

Die folgenden Sondertasten können für Verknüpfungen verwendet werden: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del,delete und f1durch f19.

In Firefox funktioniert die keyCode-Eigenschaft beim Ereignis onkeypress nicht (gibt nur 0 zurück). Verwenden Sie für eine browserübergreifende Lösung die Eigenschaft which zusammen mit keyCode, z.

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support