jQuery: Tasten auf Tastatur Aktion zuweisen (Keyboard Event)

In diesem Tutorial zeige ich euch, wie ihr mit Hilfe von jQuery auf eine Tastatureingabe des Nutzers auf eurer Webseite reagieren könnt. Jedes mal, wenn zum Beispiel eine bestimmte Taste gedrückt wird, soll eine andere Aktion ausgeführt werden. Wir schauen uns zunächst an, wie wir auf Buchstaben-Tasten reagieren können, anschließend wie wir auch das Drücken von Sondertasten wie die Pfeiltasten auswerten können.

Um dieses Keyboard-Event zu realisieren, könnt ihr folgendes Grundgerüst für euren Code verwenden:

$(document).ready(function() {
   $(document).keydown(function(event) {
      var key = String.fromCharCode(event.keyCode);
      key.toUpperCase();

      switch(key) {
         case 'A': alert('Taste A'); break;
         case 'B': alert('Taste B'); break;
         case 'C': alert('Taste C'); break;
      }
   });
});

Da wir die Tastatur-Eingaben unserer ganzen Seite abfangen möchten, benutzen wir $(document).keydown(). Statt "document" lässt sich aber auch ein beliebiges Element wie eine Textbox auswählen, um zum Beispiel nur auf Eingaben innerhalb dieser Box zu reagieren.

Anschließend fangen wir mit event.KeyCode den Code der Taste ab, die gedrückt wurde und wandeln diesen mit der Funktion String.fromCharCode() in einen String um.

Wenn wir nicht zwischen Groß- und Kleinschreibung unterscheiden möchten, können wir in der nächsten Zeile mit toUpperCase() dafür sorgen, dass sich auch bei einer Eingabe von "a" das Ereignis für "A" auslöst. Wollen wir dies nicht, können wir diese Zeile einfach weglassen.

Nun ist unsere gedrückte Taste in der Variable "key" gespeichert. Mit einer einfachen switch-Anweisung können wir danach den unterschiedlichen Buchstaben jeweils eigene Funktionen (hier beispielhaft eine simple Message-Box mit alert) zuweisen.

Achtung: Probleme kann es bei dieser Lösung mit Umlauten und Sonderzeichen geben, aber so lange man auf das normale ANSI-Alphabet (A bis Z, 0 bis 9 und so weiter) zurückgreift, sollte es problemlos funktionieren.

Auf Sondertasten reagieren

Das erste Beispiel hat demonstriert, wie wir auf das Drücken von Buchstabentasten reagieren können. Was aber ist, wenn wir auf die Pfeiltasten, die Enter-Taste, die ESC-Taste oder die Leertaste reagieren möchten? Hier ist ein Beispiel:

$(document).ready(function() {
   $(document).keydown(function(event) {
      switch(event.which) {
         case 37: alert('Pfeiltaste Links');  break;
         case 38: alert('Pfeiltaste Hoch');   break;
         case 39: alert('Pfeiltaste Rechts'); break;
         case 40: alert('Pfeiltaste Runter'); break;
         case 13: alert('Enter-Taste');       break;
         case 27: alert('ESC-Taste');         break;
         case 32: alert('Leertaste');         break;
         default: return;
      }
      e.preventDefault();
   });
});

Dieses Mal wandeln wir den Keycode nicht in sein Zeichenäquivalent um sondern werten die Keycodes direkt aus. Jede Taste hat einen anderen Keycode, so dass wir einfach darauf reagieren können. In unserem Beispiel zeigen wir eine unterschiedliche Meldung an, je nachdem welche Taste gedrückt wurde.

Damit nicht zusätzlich noch die Default-Aktion der jeweiligen Taste ausgeführt wird (wie zum Beispiel das Navigieren auf der Seite mittels der Pfeiltasten) rufen wir am Ende des Event-Handlers e.preventDefault() auf. Die default-Bedingung "return" für alle anderen Tasten, denen wir keine eigene Behandlung zugewiesen haben, sorgt dafür dass e.preventDefault() nur für die behandelten Tasten gilt.