In den letzten Chrome-Versionen wurden zwei neue KeyboardEvents 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 (in Chrome 51 hinzugefügt) bieten Entwicklern eine einfache Möglichkeit, Informationen abzurufen, die mithilfe älterer Attribute schwierig zu erhalten wären.
Codeattribut
Als Erstes kommt das code-Attribut. Dieser 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), das Gebietsschema (z. B. Deutsch oder Französisch) oder Modifikatortasten zu berücksichtigen.
Das ist nützlich, wenn Sie wissen möchten, welche physische Taste gedrückt wurde, nicht, welchem Zeichen sie entspricht. Wenn Sie beispielsweise ein Spiel entwickeln, möchten Sie möglicherweise eine bestimmte Tastenkombination verwenden, um den Spieler in verschiedene Richtungen zu bewegen. Diese Zuordnung sollte idealerweise unabhängig vom Tastaturlayout sein.
Das Schlüsselattribut
Als Nächstes haben wir das neue key-Attribut. Auch er ist auf einen String festgelegt. Während code Informationen zur physischen Taste zurückgibt, die gedrückt wurde, enthält key das Zeichen, das von dieser Taste generiert wird, wobei das aktuelle Tastaturlayout, die Sprache und die Modifikatortasten berücksichtigt werden.
Der Wert des Attributs key ist nützlich, wenn Sie wissen möchten, welches Zeichen auf dem Bildschirm angezeigt würde, als hätte der Nutzer etwas in eine Textfeld eingegeben.
Was bedeutet das in der Praxis?
Angenommen, Ihr Nutzer verwendet eine US-Tastatur mit QWERTY-Layout. Wenn Sie auf der Tastatur die physische Taste Q drücken, wird eine KeyboardEvent mit dem code-Attribut "KeyQ" ausgegeben. Das gilt unabhängig vom Tastaturlayout und von anderen Modifikatortasten. Zum Vergleich: Auf einer französischen (AZERTY) Tastatur hätte dieser Schlüssel weiterhin die code "KeyQ", auch wenn auf der Taste der Buchstabe „a“ aufgedruckt ist.
Wenn Sie auf derselben US-Tastatur die physische Taste Q drücken, wird in der Regel ein KeyboardEvent generiert, wobei key auf "q" (ohne Modifikatortasten), auf "Q" (mit Umschalt- oder Feststelltaste) oder auf "œ" (unter OS X mit Alt) gesetzt ist. Auf einer französischen AZERTY-Tastatur würde mit derselben Taste ein „a“ (oder „A“ mit Umschalt- oder Feststelltaste) generiert. Bei anderen Tastaturlayouts kann der Wert für key "й", "ض", "ㅂ", "た" oder ein anderes Zeichen sein.
Wenn Sie in unserem Beispielspiel die WASD-Tasten für die Bewegung verwenden möchten, können Sie das Attribut code verwenden und nach "KeyW", "KeyA", "KeyS" und "KeyD" suchen. Das funktioniert für alle Tastaturen und alle Layouts – auch für AZERTY-Tastaturen, bei denen die Position der Tasten „w“ und „z“ vertauscht ist.
Virtuelle Tastaturen
Bisher haben wir uns auf das Verhalten bei einer physischen Tastatur konzentriert. Was ist mit Nutzern, die auf einer virtuellen Tastatur oder einem alternativen Eingabegerät tippen? Die Spezifikation enthält offizielle Informationen zum Attribut code. Zusammenfassend lässt sich sagen, dass bei einer virtuellen Tastatur, die dem Layout einer Standardtastatur nachempfunden ist, ein geeignetes code-Attribut festgelegt wird. Bei virtuellen Tastaturen mit nicht traditionellen Layouts wird code möglicherweise gar nicht festgelegt.
Beim Attribut key ist es einfacher. Es sollte auf einen String festgelegt werden, der auf dem Zeichen basiert, das der Nutzer (virtuell) eingegeben hat.
Jetzt ausprobieren
Gary Kačmarčík hat eine fantastische Demo zusammengestellt, um alle mit KeyboardEvents verknüpften Attribute zu visualisieren:
Browserübergreifende Unterstützung
Das Attribut code wird derzeit nur in Chrome 48 und höher, Opera 35 und höher sowie Firefox 44 und höher unterstützt.
Das Attribut key wird in Firefox 44 und höher, Chrome 51 und höher sowie Opera 38 und höher unterstützt. In Internet Explorer 9 und höher sowie Edge 13 und höher wird es teilweise unterstützt.