CSS, HTML UND JAVASCRIPT MIT {STIL}

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 Ergenis zeigt die einzelne Taste, die gedrückt wurde – und zwar 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:

Taste	Key Code	Taste	Key Code	Taste	Key Code
backspace	8	tab	9	enter	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	3	51	4	52
5	53	6	54	7	55
8	56	9	57	a	65
b	66	c	67	d	68
e	69	f	70	g	71
h	72	i	73	j	74
k	75	l	76	m	77
n	78	o	79	p	80
q	81	r	82	s	83
t	84	u	85	v	86
w	87	x	88	y	89
z	90	left window key	91	right window key	92
select key	93	numpad 0	96	numpad 1	97
numpad 2	98	numpad 3	99	numpad 4	100
numpad 5	101	numpad 6	102	numpad 7	103
numpad 8	104	numpad 9	105	multiply	106
add	107	subtract	109	decimal point	110
divide	111	f1	112	f2	113
f3	114	f4	115	f5	116
f6	117	f7	118	f8	119
f9	120	f10	121	f11	122
f12	123	num lock	144	scroll lock	145
semi-colon	186	equal sign	187	comma	188
dash	189	period	190	forward slash	191
grave accent	192	open bracket	219	back slash	220
close braket	221	single quote	222

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