Javascript Tastatur Ereignis

Siehe auch diesen Tipp.

Hier geht es darum, dass auf Tastatureingabe etwas geschieht. Man kennt es von Spielen, dass beispielsweise mit den Pfeiltasten ein Raumschiff oder ähnliches gesteuert wird. Die Aufgabe die eine Taste normalerweise übernimmt, soll nun für Javascript genutzt werden.

Dazu schreibt man in Javascript eine Funktion die das Tastendruckereignis abfängt und an das Dokument übergibt.

document.onkeydown = function(event) {
  //Hierher kommt die Reaktion auf das Event
}

Jede Taste hat einen sogenannten Keycode. Diesen Keycode kann man ermitteln, um ein Anweisung auszuführen. In meinen Flashtipps gibt es eine Anwendung, die jeden Keycode anzeigt.

Über das Argument der Funktion kann man den Keycode abfragen:

document.onkeydown = function(event) {
  if (event.keyCode == 8) {
    alert("Sie haben die Backspace gedrückt");
  }
}

Die Backspace Taste hat im Browser die Funktion die vorige Seite aufzurufen. Nachdem die Taste gedrückt wurde, wird sie an den Browser weitergeleitet und ausgeführt. Um das zu Verhindern, muss diese Aufsteigen des Events verhindert werden und der Wert false zugewiesen werden.

document.onkeydown = function(event) {
  if (event.keyCode == 8) {
    event.cancelBubble = true;
    event.returnValue = false;
    alert("Sie haben BACKSPACE gedrückt");
  }
  return event.returnValue;
}

Derlei Verhindern der normalen Tastaturereignisse sollte man jedoch vermeiden, da dadurch die Funktionalität des Browsers beeinträchtigt wird. Deswegen wird in Spielen die Steuerung mittels Pfeiltasten häufig durch die Tasten a, s, d, w ersetzt.

Beispiel

Im folgenden Beispiel werden genau diese Tasten benutzt. Folgende Keycodes liegen hier vor:

a = links (65), d = rechts (68), w = oben (87), s = unten (83).

In dem Beispiel wird ein Div Element mit id="auto" angsprochen und dessen CSS Positionsangaben verändert. Siehe dazu auch den Tipp: DOM

Beispiel

CSS

div#auto {
	position: absolute;
	width: 100px;
	height: 40px;
	background-color: red;
}

HTML

<div id="auto">Auto</div>

 

Script

var code, xpos, ypos, car, speed;
 car = document.getElementById("auto");
 speed = 5;
 xpos = 200;
 ypos = 200;
car.style.left = xpos +'px';
car.style.top = ypos+'px';

document.onkeydown = function(event) {
	code = event.keyCode;
	if (code == 65)  xpos -= speed;
	if (code == 68)  xpos += speed;
	if (code == 87)  ypos -= speed;
	if (code == 83)  ypos += speed;
	car.style.left = xpos +'px';
	car.style.top = ypos+'px';
	event.cancelBubble = true;
    event.returnValue = false;
  return event.returnValue;
}

Javascript Tipps