Javascript keyCode, charCode, which • Tastureingaben

Der keyCode zeigt, welche Taste der Tastatur bei Eingaben in Formularen gedrückt wird, auch Sondertasten wie Pfeiltasten, CTRL, ALT, BACKSPACE und SHIFT.

Neben den 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.

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

  • keydown
  • keypress

Mit der zunehmenden Bedeutung von Javascript für Web-Apps kommt den Javascript-Events eine immer höhere Bedeutung zu. Das einfache Absenden eines Formulars und das Erkennen eines einzelnen Zeichens reichen für ausgefeilte Javascript-Anwendungen nicht mehr aus.

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 hat 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 ist die Unterstützung offiziell abgesegnet.

keyCode, charCode und which

Traditionell liefert das Drücken einer Taste auf der Tastatur drei Werte: keyCode, charCode und which. Jedes dieser drei Attribute ist ein numerischer Wert.

  • keyCode: numerischer Wert der gedrückten Taste
  • charCode: Ascii-Schlüssel der Taste
  • which ist das Zeichen

keyCode eines Events abfragen

Nun sind nicht alle Tastaturen gleich: Amerikanische Tastaturen enthalten kein ä, deutsche Tastaturen brauchen eine Tastatur-Kombination, um ein französisches E Accent Grave umzusetzen.

Der Key Code wird als Eigenschaft des Javascript Events onkeydown abgehört, z.B. wie folgt:

function getKeyCode(event) {
   event = event || window.event;
   return event.keyCode;
}

Das Ergebnis zeigt die einzelne Taste, die gedrückt wurde, als Zahl. 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:

backspace
8
tab
9
Enter / Eingabe
13
shift
16
ctrl
17
alt
18
pause/break
19
caps lock
20
escape
27
page up
33
page down
34
end
35
home
36
left arrow
37
up arrow
38
right arrow
39
down arrow
40
insert
45
delete
46
0
48
1
49
2
50
9
57
a
65
b
66
c
67
z
90
left window key
91
right window key
92
select key
93
numpad 0
96
numpad 1
97
numpad 2
98
numpad 9
105
Multiplikation
106
Plus
107
Minus
109
Dezimalpunkt
110
Teilen
111
f1
112
f2
113
f3
114
f12
123
num lock
144
scroll lock
145
Semicolon
186
Gleich
187
Komma
188
dash
189
Punkt
190
Vorwärts-Slash
191
grave accent
192
Öffnende Klammer
219
Backslash
220
Schließende Klammer
221
Einfache Anführung
222

Hier sind nur einige Beispiele realisiert – viel erschöpfender zum Thema keyCodes – Tastencodes der Tastatur ist JavaScript Madness: Keyboard Events.

Tastaturereignisse keydown, keyup und keypress