02 Stimmen

jQuery: Tasten auf Tastatur Aktion zuweisen (Keyboard Event)

Tipp von Progger99 | 26.02.2013 um 17:19

In diesem Tipp zeige ich euch, wie ihr mit Hilfe von jQuery auf eine Tastatureingabe auf eurer Seite reagieren könnt. Jedes mal, wenn zum Beispiel die Taste "A", "B" oder "C" gedrückt wird, soll eine andere Aktion ausgeführt werden.

Um dieses Keyboard Event zu realisieren, könnt ihr folgendes Code-Grundgerüst 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 eine Message-Box mit alert) zuweisen.

Achtung: Probleme kann es hier mit Umlauten und Sonderzeichen geben, aber so lange man auf das normale ANSI-Alphabet (A bis Z) zurückgreift, sollte es funktionieren.

AntwortenPositivNegativ

Über den Autor

AvatarDer Autor hat keine Kurzbeschreibung seines Profils angegeben.
Profil anzeigen

 

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.