Javascript event.key, event.code • Tastureingaben

Javascript event.key und event.code – Zeichen beim Drücken einer Taste identifizieren

event.key zeigt in Gemeinschaft mit event.code, welche Taste der Tastatur bei Eingaben in Formularen gedrückt wird, auch Sondertasten wie Pfeiltasten, CTRL, ALT, BACKSPACE und SHIFT und natürlich die Entertaste.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Events der Tastatur

Neben dem einfach zu erkennenden Druck auf Tasten wie »a«, »9« oder »#« muss auch das Herunterdrücken der Sondertasten wie ctrl, alt, Shift, Pfeil nach oben, Pfeil nach links, usw. erkannt werden. Soll z.B. eine Navigation mit den Pfeil-Tasten umgesetzt werden, müssen die jeweiligen Tasten erkannt werden. Wird die Maus einfach bewegt oder beim Mouse Move auch die Shift- oder Alt-Taste gehalten?

In der Event Level 2 Spezifikation hatte das W3C noch die Finger von den Tasten gelassen, aber Javascript unterstützt die Tastatur-Events trotzdem seit eh und je. Mit DOM Level 3 Events wurde die Unterstützung offiziell abgesegnet.

Tastaturen sind ein bewegtes Ziel: Fast alle Tasten sind mehrfach belegt, eine schweizer Tastatur unterscheidet sich von einer deutschen, unter Windows sind Tasten anders belegt als unter Mac OS. Und nicht zu vergessen: all die virtuellen Tastaturen der mobilen Geräte.

Tastatur-Layout
Tastatur-Layout Deutsche Tastatur Mac OS, Schweizer Tastatur, Window-Tastatur

Schon bei den einfachen Buchstaben gibt es Unterschiede. Die Werte von event.key und event.code identifizieren die gedrückte Taste bzw. Kombination aus ctrl, shift, alt und option-Taste und den Zeichen der Tastatur.

Die Registrierung der Events keydown, keypress und keyup folgt dem normalen Ablauf dieser Ereignissen, aber die Events der gedrückten Taste(n) unterscheiden sich bei keydown und keypress.

elem.addEventListener ("keydown", function (event) {
	console.log (event.key + " " + event.metaKey)
});

elem.addEventListener ("keypress", function (event) {
	console.log (event.key + " " + event.metaKey)   
});

Wenn der Benutzer eine Taste der Tastatur drückt, entstehen die Events der Tastatur:

keydown fängt das Drücken der Shift-, Option- oder Alt-Tasten und der Control-Taste ab, keypress nicht.

Tastatur-Events unter Windows
Tastatur-Events unter MacOS

Aktuell: key und code, veraltet: keyCode und charCode

Mit dem Drücken einer Taste auf der Tastatur liefert das Event eine Serie von Werte: code, key und location. Daneben gibt es noch which, keycode, charCode, die heute als deprecated (veraltet) gelten.

keyCode (veraltet)
numerischer Wert der gedrückten Taste, z.B. 48 für 0, aber 187 für Shift 0 (=), also nicht eindeutig
key
das angezeigte Zeichen, z.B. ä oder Ä mit gehaltener Shift-Taste.
code
Identifier der gedrückten Taste als String, z.B. Digit6, PageDown, Home. Allerdings kümmert sich event.code nicht unbedingt um die Bedeutung der Taste auf der jeweiligen Tastatur, sondern legt eine klassische amerikanische Tastatur zugrunde (z statt y und y statt z).
ctrlKey
ctrl-Taste gedrückt – true oder false
shiftKey
Shift-Taste gedrückt – true oder false
metaKey
Command unter MacOS, Windows-Taste unter Windows
charCode (veraltet)
gab gab einen Unicode-Wert als Symbol für die gedrückte Taste zurück.
location
Die Platzierung der Taste, wenn eine Taste mehrfach vorkommt.
0 Taste kommt nur einmal vor
1 Taste auf der linken Seite
2 Taste auf der rechten Seite
3 Numerische Tastatur

event.code ist der Nachfolger des veralteten event.charCode, das heute nicht mehr benutzt werden soll. Nur IE11 kennt code noch nicht.

keyCode gehört ebenfalls zu den veralteten Eigenschaften – der Wert ist die gedrückte Taste als Zahl. keyCode 76 kann aber unter MacOS ein kleines l, ein großes L bei gehaltener Shift-Taste oder das @-Zeichen bei gehaltener Option-Taste sein. Nichts, auf das man sich ohne Weiteres verlassen kann.

key und code eines Events abfragen

Tastatur-Layouts weichen voneinander ab: Amerikanische Tastaturen enthalten kein ä, deutsche Tastaturen brauchen eine Tastatur-Kombination, um ein französisches E Accent Grave umzusetzen. Auf einer amerikanischen Tastatur erzeugt die Taste 2 mit gehaltenem Shift-Key das at-Zeichen (@), auf der deutschen Tastatur einer Mac-Tastatur liegt das @-Zeichen »unter« dem L, auf der Tastatur des PCs unter dem Q und wird durch Halten der Alt-Taste erzeugt.

event.key, event.code, … werden als Eigenschaften des Javascript onkeydown-Events abgehört, z.B. wie folgt:

document.querySelector ("input").addEventListener ("keydown", function (event) {
	output.textContent = event.keyCode;
}

Bei einigen Tasten allerdings kann das Event schon vom Betriebssystem abgefangen werden (z.B. die Tasten Lautsprecher lauter oder leiser auf dem Mac).

In das Eingabefeld klicken oder navigieren und eine Taste drücken, um den Javascript-Key Code anzuzeigen:

key
keycode
code
ctrl
meta
shift
location

event.keyCode ist zwar veraltet, wird aber von allen Browsern noch unterstützt.

Tote Tasten (DEAD)

Einige Tasten werden als DEAD, als tote Tasten bezeichnet. Unter MacOS gehört z.B. ~ (Tilde) dazu, dass sich erst zeigt, wenn Option n und dann noch eine weitere Taste gedrückt wird.

@ @ keypress Shift+2 keydown Shift+2 @ 64 undef @ 50 undef key keycode code key keycode code π π keypress ALT+p keydown Alt+p π 960 KeyP π 80 KeyP key keycode code key keycode code