web-dev-qa-db-de.com

keypress und keyup - warum unterscheidet sich keyCode?

Verwandt: JavaScript KeyCode vs CharCode

Hier ist ein Code, den Sie zu Hause oder in einem jsfiddle ausprobieren können:

el.addEventListener( 'keyup', function( e ) { 
    console.log( 'Keyup event' );
    console.log( e.keyCode );
} ); 
el.addEventListener( 'keypress', function( e ) { 
    console.log( 'Keypress event' );
    console.log( e.keyCode );
} );

Warum unterscheidet sich der Schlüsselcode?

Ich kann verstehen, warum man nur den Tastendruck verwenden soll. Was ich jedoch nicht verstehe, ist, wie zwei Schlüsselereignisse, die dieselbe Tastenkombination auf der Tastatur haben, unterschiedliche Schlüsselcodes angeben.

PS: Ich mache mir keine Sorgen um die Unterstützung älterer Browser. Ich habe dies in Chrome ausprobiert und war überrascht und konnte keine Erklärung finden.

42

Die Veranstaltungen dienen völlig unterschiedlichen Zwecken. Verwenden Sie keyup und keydown zum Identifizieren von physischen Schlüsseln und keypress zum Identifizieren von getippten Zeichen. Die beiden sind grundsätzlich verschiedene Aufgaben mit unterschiedlichen Ereignissen; Versuche nicht, die beiden zu mischen. Insbesondere keyCode on keypress -Ereignisse ist normalerweise redundant und sollte nicht verwendet werden (außer im älteren IE, siehe dazu das unten stehende Dokument). Bei druckbaren Tastendrücken ist dies normalerweise das Gleiche wie which und charCode, auch wenn zwischen den Browsern einige Unterschiede bestehen.

Jan Wolters Artikel über Schlüsselereignisse , der bereits in einer anderen Antwort verlinkt ist, ist für mich das definitive Wort zu diesem Thema und enthält Tabellen, die beschreiben, was die verschiedenen Eigenschaften für jeden Typ von Schlüsselereignis und jeden Browser zurückgeben.

45
Tim Down

Es gibt einen guten Artikel auf quirksmode.org , der genau diese Frage beantwortet. Vielleicht möchten Sie auch die Ergebnisse von Unixpapa ansehen.

2
Bergi

Nun, ich stolperte über einen Unterschied, als ich versuchte, den Eintrag eines Benutzers von einer Eingabe des Formulars in einen anderen Teil des Formulars zu kopieren, den ich für meine Benutzer gesperrt hatte, um sie zu bearbeiten. Was ich fand, war das immer Ein Benutzer wechselte mit der Taste zum nächsten Etikett, nachdem die Eingabe abgeschlossen war. Eine letzte Tastatureingabe wurde in dem kopierten Eintrag übersehen, als ich eventListener für Tastendruck verwendete. Dies wurde bei der Verwendung von keyup behoben.

Abschließend überwacht Keypress den Zustand zu dem Zeitpunkt, zu dem die Taste gedrückt wurde, und das Ergebnis der Tastenbetätigung bleibt dabei , während keyup den Systemstatus abhört, nachdem die Taste gedrückt wurde, und das Ergebnis der Tastendruck.

0
Mani