Florian Herlings, freier Webentwickler aus Düsseldorf.

Tastendruck mit Javascript abfangen

Leider ist es manchmal unbedingt nötig, dass eine bestimmte Taste auf der Tastatur zweckentfremdet wird. Sei es, dass man verhindern möchte dass der Nutzer aus Versehen die Seite neu lädt, oder dass man eine eigenen Hilfe-Funktion beim Drücken der F1-Taste auslösen möchte.

Tastendruck-Event abfangen

Sobald der Nutzer eine Taste auf der Tastatur drückt, verpackt der Browser die Informationen über die gedrückte Taste in ein event-Objekt und gibt dieses an das document-Objekt in Javascript weiter. Ein event-Objekt ist nur ein Paket, in das alle Informationen über den Tastendruck verpackt sind, so dass man diese mit Javascript auslesen und bearbeiten kann. Reagiert Javascript nicht auf dieses Event, wird es zurück an den Browser übergeben, welcher dann entscheidet was weiter passieren soll.

Um nun das Tastendruck-Event in Javascript abzufangen, müssen wir in Javascript eine Funktion schreiben, die auf Tastendruck-Events reagiert und diese an das document-Objekt hängen:

document.onkeydown = function(event) {
  //Hierher kommt die Reaktion auf das Event
}
Der anonymen Funktion, die an das document-Objekt gehangen wurde, wird von der Browser-Engine ein event-Objekt übergeben.

Auf das Tastendruck-Event reagieren

Das Tastendruck-Event, welches wir nun vom Browser übergeben bekommen, hat verschiedene Eigenschaften, von denen uns im Grunde nur die Eigenschaft keyCode interessiert: Jede Taste auf der Tastatur hat einen bestimmten keyCode. Der keyCode ist immer eine Zahl, da sich verschiedene Tasten auf der Tastatur (wie zum Beispiel die Pfeiltasten) nicht als Text darstellen lassen.

Eine schöne Übersicht über keyCodes der üblichen Tasten auf einer Tastatur findet sich auf folgender externen Seite: mediaevent.de.

Um nun auf das Betätigen einer bestimmten Taste zu reagieren, muss man den keyCode des Events abfragen und ihm mit einem aus der Liste entnommenen keyCode vergleichen. In diesem Beispiel wird die Backspace-Taste abgefangen. Die Backspace-Taste hat den keyCode 8:

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

Aufsteigen des Events verhindern

Das einzige Problem, welches nun noch aussteht, ist das Aufsteigen des Events: Wenn man keine weiteren Schritte einleitet, wird das Event nachdem es durch die Javascript-Funktion gegeben wurde, wieder an den Browser zurückgegeben, welcher dann entscheidet, was weiterhin mit dem Event passieren soll. Im Beispiel der Backspace-Taste versucht der Browser auf die vorher besuchte Seite zu gelangen (entspricht also dem Betätigen der Zurück-Taste im Browser).

Dies kann jedoch in der Javascript-Funktion relativ leicht verhindert werden. Um dies zu erreichen müssen wir

  1. dem Event mitteilen, dass es das Event nicht aufsteigen soll
  2. dem Event den boolschen Wert ''false'' als Rückgabewert geben
document.onkeydown = function(event) {
  if (event.keyCode == 8) {
    event.cancelBubble = true;
    event.returnValue = false;
    alert("Sie haben BACKSPACE gedrückt");
  }
  return event.returnValue;
}

Hinweis

Es ist also relativ einfach, Tastendrücke in Javascript abzufangen und mit neuer Funktionalität zu beladen. Man sollte jedoch immer darauf achten, dass die Webseite sich nicht plötzlich anders verhält als vom Nutzer erwartet! Tasten wie die Pfeiltasten, oder Esc sollte man nicht mit neuer Funktionalität beladen.

Wenn man (wie in diesem Beispiel) die Backspace-Taste überlädt und zusätzlich das Event am aufsteigen hindert, dann funktioniert die Backspace-Taste auf nicht mehr in Input-Feldern, was zu einem großen Ärgernis werden kann.

Als Beispiel findet sich auf GitHub der Quelltext einer kompletten HTML-Seite.

Lerne mehr auf CodeScouts.de