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.
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.
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:
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.
