Mittels JavaScript lassen sich auf Webseiten die Tastatureingaben tracken. Das bedeutet, dass wir beispielsweise bei einem Klick nach links oder rechts auf der Tastatur eine andere Aktion ausführen können. Das prominenteste Beispiel dürfte wohl die Anzeige einer Galerie sein, durch dessen Bilder man mit den entsprechenden Pfeiltasten navigieren kann.
Während die W3C in der Event Level 2 Spezifikation noch die Finger von den Tasten gelassen hat, werden Tastatur-Events seit DOM Level 3 Events offiziell unterstützt.
Wenn der Benutzer eine Taste der Tastatur drückt, entstehen die JavaScript-Events:
- keydown
- keypress
- keyup
Eine ganz einfache Implementierung der Tastatur-Events in JavaScript findet ihr hier:
if (window.addEventListener){
window.addEventListener("keydown", keyDownFunction, false);
}else if (window.attachEvent){
window.attachEvent("onkeydown", keyDownFunction);
}else{
alert('Not Supported.');
}
function keyDownFunction(event) {
event = event || window.event;
alert('Pressed Key: ' + event.keyCode);
}Diese wenigen Zeilen Code bewirken ein Binding des "keydown"-Events oder "onkeydown"-Events auf eine Funktion mit dem Namen "keyDownFunction".
Diese Funktion wird also jeder mal ausgeführt, wenn das Event "keydown" oder "onkeydown" ausgelöst wird.
Zur Visualisierung wird eine Meldung ausgegeben, sofern eine Taste gedrückt wurde.
Bitte achtet darauf, dass jeder Taste eine Zahl (keyCode) zugeordnet wurde. Beispielsweise beschreibt die Zahl 37 die Pfeiltaste nach links, während die Pfeiltaste nach oben die 38 darstellt. Es kann allerdings ebenso vorkommen, dass die Taste "ä" bei gleichen keyCode auf einer Englischsprachigen Tastatur das Zeichen --> ' <-- bedeutet.
Weiterhin können Spezialtasten (Lauter, Leiser, Play, Stop, ...) bereits vom Betriebssystem abgefangen werden und kommen niemals im Browser an.
