In den letzten Versionen von Chrome wurden zwei KeyboardEvent-Elemente hinzugefügt, die als Parameter an die Ereignis-Listener keydown, keypress und keyup übergeben werden. Sowohl das Attribut code (in Chrome 48 hinzugefügt) als auch das Attribut key (hinzugefügt in Chrome 51) bieten Entwicklern eine einfache Möglichkeit, Informationen zu erhalten, die mit älteren Attributen schwierig wären.
Das Code-Attribut
Das erste ist das Attribut code. Wird auf einen String festgelegt, der die Taste darstellt, die zum Generieren der KeyboardEvent gedrückt wurde, ohne das aktuelle Tastaturlayout (z. B. QWERTY oder Dvorak), die Sprache (z. B. Englisch oder Französisch) oder beliebige Modifikatortasten zu berücksichtigen.
Das ist nützlich, wenn es dir wichtig ist, welche physische Taste gedrückt wurde, und nicht, welchem Zeichen sie entspricht. Wenn Sie beispielsweise ein Spiel schreiben, möchten Sie vielleicht bestimmte Tasten verwenden, um den Spieler in verschiedene Richtungen zu bewegen. Die Zuordnung sollte idealerweise unabhängig vom Tastaturlayout sein.
Das Schlüsselattribut
Als Nächstes haben wir das neue Attribut key. Es ist ebenfalls auf einen String festgelegt. Während code Informationen über die gedrückte physische Taste zurückgibt, enthält key das Zeichen, das von dieser Taste generiert wird, unter Berücksichtigung des aktuellen Tastaturlayouts, der Sprache und der Modifikatortasten.
Der Wert des key-Attributs ist praktisch, wenn Sie wissen möchten, welches Zeichen auf dem Bildschirm angezeigt werden würde, als hätte der Nutzer eine Texteingabe eingegeben.
Was bedeutet das in der Praxis?
Nehmen wir für ein konkretes Beispiel an, Ihr Nutzer verwendet eine US-amerikanische Tastatur mit QWERTY-Tastaturlayout. Durch Drücken der physischen Q-Taste auf dieser Tastatur wird ein KeyboardEvent ausgegeben, dessen code-Attribut auf "KeyQ" gesetzt ist. Dies gilt unabhängig vom Tastaturlayout und unabhängig von anderen Modifikatortasten. Zum Vergleich: Auf einer französischen Tastatur (AZERTY) hätte diese Taste immer noch den code-Wert "KeyQ", obwohl der Buchstabe auf dem Tastenkappen ein „a“ ist.
Durch Drücken der physischen Q-Taste auf derselben US-Tastatur wird in der Regel ein KeyboardEvent generiert, wobei key auf "q" (ohne Modifikatortasten) oder "Q" (mit Umschalt- oder Feststelltaste) oder "œ" (unter OS X mit Alt) festgelegt ist. Auf einer französischen AZERTY-Tastatur würde dieselbe Taste ein „a“ (oder „A“ bei gleichzeitiger Umschalt- oder Feststelltaste) generieren. Bei anderen Tastaturlayouts könnte der Wert key "й", "ض", "ㅂ", "た" oder ein anderes Zeichen sein.
Um noch einmal auf unser Spielbeispiel von vorhin zurückzukommen: Wenn du möchtest, dass dein Spiel die WASD-Schlüssel für Bewegung verwendet, kannst du das code-Attribut verwenden und nach "KeyW", "KeyA", "KeyS" und "KeyD" suchen. Dies funktioniert mit allen Tastaturen und allen Layouts – sogar bei AZERTY-Tastaturen, bei denen die Position der "w"- und "z"-Tasten vertauscht wird.
Bildschirmtastaturen
Sie werden feststellen, dass wir uns bisher auf das Verhalten bei der Annahme einer physischen Tastatur konzentriert haben. Was ist mit Nutzern, die über eine virtuelle Tastatur oder ein anderes Eingabegerät schreiben? Die Spezifikation bietet die offizielle Anleitung für das Attribut code. Kurz gesagt: Bei einer virtuellen Tastatur, die das Layout einer Standardtastatur nachahmt, wird ein entsprechendes code-Attribut festgelegt. Bei virtuellen Tastaturen, die nicht traditionelle Layouts verwenden, kann jedoch code gar nicht festgelegt werden.
Beim key-Attribut ist die Vorgehensweise einfacher. Es sollte auf einen String festgelegt werden, der darauf basiert, welches Zeichen der Nutzer (virtuell) eingegeben hat.
Ausprobieren
Gary Kačmarčík hat eine fantastische Demo zusammengestellt, in der alle mit KeyboardEvent-Elementen verbundenen Attribute visualisiert werden:
Browserübergreifende Unterstützung
Derzeit wird das Attribut code auf Chrome 48 und höher, Opera 35 und höher sowie in Firefox 44 und höher unterstützt.
Das Attribut key wird in Firefox 44 und höher, Chrome 51 und höher sowie in Opera 38 und höher unterstützt. In Internet Explorer 9 und höher sowie in Edge 13 und höher wird teilweise Unterstützung zur Verfügung gestellt.