jQuery keyCode event

Einführung

In diesem Tutorial geht es um keyCode event. Mit keyCode event können Sie auf ein Tastaturereignis zurückgreifen.

HTML

Zuerst erstellen wir ein HTML Gerüst.

<div class="container">
<div class="slider">
<img src="img.jpg" alt="" />
<img src="img_A.jpg" alt="" />
<img src="img_B.jpg" alt="" />
<img src="img_C.jpg" alt="" />
<img src="img_D.jpg" alt="" />
<img src="img_E.jpg" alt="" />
<img src="img_F.jpg" alt="" />
<img src="img_G.jpg" alt="" />
<img src="img_H.jpg" alt="" />
</div>
</div>

CSS

.container {
width: 500px;
height: 342px;
position: relative;
overflow: hidden;
}
.slider {
width: 4600px;
height: 342px;
position: absolute;
top: 0px;
left: 0px;
}
.slider img {
top: 0px;
}

jQuery

Als erstes brauchen Sie eine eine externe JavaScript Datei, die Sie unter jquery.com downloaden können. Diese JavaScript Datei können sie mit Hilfe <script>-Tag auf Ihre Seite einbinden.

<html>
<head>
<script src="jquery-1.4.4.min.js"></script>
</head>
<body>
</body>
</html>

Nach dem Sie JavaScript Datei eingebunden haben, starten wir mit jQuery Programmierung. Für Anfang brauchen wir eine ready-Methode. Ready-Methode schützt den DOM. Das heißt, inneren befindliche Funktion nur dann ausgeführt werden, wenn DOM eine Webseite korrekt aufgebaut ist.

<script type="text/javascript" >
$(document).ready(
function() {
// Hier kommt der jQuery Code
}
);
</script>

Das folgende Skript enthält erläuternde Kommentare.

$(document).keyup(function (event) {
switch (event.keyCode) {// Es wird mit Hilfe von switch()-Anweisung abgefragt, welche Buchstabe gedrückt wurde
case 65:// Beim drücken A-Taste, wird classe slider nach oben bewegt
$(".slider").stop().animate({left:'-504px'},
{queue:false,duration:500});// Geschwindigkeit
break;
case 66:// Beim drücken B-Taste, wird classe slider nach oben bewegt
$(".slider").stop().animate({left:'-1008px'},
{queue:false,duration:500});
break;
case 67:
$(".slider").stop().animate({left:'-1512px'},
{queue:false,duration:500});
break;
case 68:
$(".slider").stop().animate({left:'-2016px'},
{queue:false,duration:500});
break;
case 69:
$(".slider").stop().animate({left:'-2520px'},
{queue:false,duration:500});
break;
case 70:
$(".slider").stop().animate({left:'-3024px'},
{queue:false,duration:500});
break;
case 71:
$(".slider").stop().animate({left:'-3528px'},
{queue:false,duration:500});
break;
case 72:
$(".slider").stop().animate({left:'-4032px'},
{queue:false,duration:500});
break;
}
});

Key-Codes

Pfriltasten

Taste	Key-Code	Taste	Key-Code
left arrow	37	up arrow	38
right arrow	39	down arrow	40

Sondertasten

Taste	Key-Code	Taste	Key-Code
BACKSPACE	8	PAGE DOWN	34
TAB	9	END	35
ENTER	13	HOME	36
SHIFT	16	INSERT	45
CONTROL	17	DELETE	46
ALT	18	+	187
CAPS LOCK	20	;	188
ESCAPE	27	-	189
SPACE	32	:	190
PAGE UP	33

Funktionstasten

Taste	Key-Code	Taste	Key-Code
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

Numpad-Tasten

Taste	Key-Code	Taste	Key-Code
NUMPAD 0	96	NUMPAD 8	104
NUMPAD 1	97	NUMPAD 9	105
NUMPAD 1	98	NUMPAD MULTIPLAY	106
NUMPAD 3	99	NUMPAD ADD	107
NUMPAD 4	100	NUMPAD ENTER	108
NUMPAD 5	101	NUMPAD SUBTRACT	109
NUMPAD 6	102	NUMPAD DECIMAL	110
NUMPAD 7	103	NUMPAD DIVIDE	111

Buchstaben

Taste	Key-Code	Taste	Key-Code
A	65	N	78
B	66	O	79
C	67	P	80
D	68	Q	81
E	69	R	82
F	70	S	83
G	71	T	84
H	72	U	85
I	73	V	86
J	74	W	87
K	75	X	88
L	76	Y	89
M	77	Z	90

Zahlen

Taste	Key-Code	Taste	Key-Code
0	48	5	53
1	49	6	54
2	50	7	55
3	51	8	56
4	52	9	57

Categories