CSS, HTML und Javascript mit {stil}

Javascript Key Codes • Auslesen von Tastureingaben

Die Bearbeitung und Plausibilitätsprüfung von Benutzereingaben in Formularfeldern gehören zu den typischen Programmierarbeiten mit Javascript.

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.

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 nichts desto Trotz seit eh und je. Mit DOM Level 3 Events ist die Unterstützung jetzt endlich offiziell …

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:

TasteKey Code
backspace8
tab9
Enter / Eingabe13
shift16
ctrl17
alt18
pause/break19
caps lock20
escape27
page up33
page down34
end35
home36
left arrow37
up arrow38
right arrow39
down arrow40
insert45
delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
left window key91
right window key92
select key93
numpad 096
numpad 197
numpad 298
numpad 399
numpad 4100
numpad 5101
numpad 6102
numpad 7103
numpad 8104
numpad 9105
Multiplikationszeichen106
Pluszeichen107
Minuszeichen109
Dezimalpunkt110
Teilen111
f1112
f2113
f3114
f4115
f5116
f6117
f7118
f8119
f9120
f10121
f11122
f12123
num lock144
scroll lock145
Semicolon186
Gleicheitszeichen187
Komma188
dash189
Punkt190
Vorwärts-Slash191
grave accent192
Öffnende Klammer219
Backslash220
Schließende Klammer221
Einfaches Anführungszeichen222

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