JavaScript/DOM/Event/Tastaturabfragen

Hinweis:

Das KeyboardEvent behandelt Abfragen von Tastaturereignissen, die auch Sonderzeichen und Funktionstasten beinhalten können. Wenn Sie Texteingaben behandeln wollen, verwenden Sie das input-Element. Handschriftliche Texteingaben auf Touchgeräten werden durch Tastaturabfragen nicht erkannt.

Die Eigenschaften charCode, keyCode und which wurden aus dem Standard entfernt, bzw. waren nie Teil eines Standards. Die Unterstützung durch Browser kann jederzeit entfernt werden.

Eigenschaften

charCode

Die Eigenschaft event.charCode speichert bei Tastaturereignissen den dezimalen Code (ASCII-Wert) der gedrückten Taste

key

Die Eigenschaft event.key speichert bei Tastaturereignissen den Wert der gedrückten Taste.

Details: caniuse.com

keyCode

Die Eigenschaft event.keyCode speichert bei Tastaturereignissen den Tastatur-Scancode der gedrückten Taste.

Der Tastaturscancode hat nicht direkt etwas mit dem Zeichencode des getippten Zeichens (z. B. ASCII, Unicode) zu tun. Viele Codes sind identisch (bei Buchstaben und Ziffern), aber es können auch Tasten abgefragt werden, die für sich genommen gar kein echtes "Zeichen" sind, z. B. die Shift-Tasten, die Funktionstasten F1 bis F12 oder das numerische Tastenfeld.

which

Die Eigenschaft event.which speichert bei Tastaturereignissen den dezimalen Code (ASCII-Wert) der gedrückten Taste und bei Mausereignissen, welche Maustaste gedrückt wurde.

Anwendungsbeispiel

Ereignisüberwachung von Tastatureingaben

Beispiel ansehen …

  var elem = document.querySelector('body'),
      text = '';
  elem.addEventListener("keydown", TasteGedrückt );
  elem.addEventListener("keyup", TasteLosgelassen);
  
  function TasteGedrückt (evt) {
	  let zeichen = String.fromCharCode(evt.charCode);
    document.querySelector('#gedrueckt').innerHTML = `<strong>Taste gedrückt</strong>: <br> key: ${evt.key} <br>keyCode: ${evt.keyCode} <br>which: ${evt.which} <br>charCode: ${evt.charCode} <br>Zeichen : ${zeichen}`;
	document.querySelector('#losgelassen').innerHTML = '';
  }


  function TasteLosgelassen(evt){
    document.querySelector('#losgelassen').innerHTML = `<strong>Taste losgelassen:</strong> <br>keyCode: ${evt.keyCode} <br>which: ${evt.which} `;
    ;
  }

Das Beispiel überwacht Tastaturereignisse auf Dokumentebene. Das heißt, wenn der Anwender irgendeine Taste drückt, wird das Ereignis von der programmierten Ereignisüberwachung abgefangen und verarbeitet. Im Beispiel wird bei jedem Tastendruck der dezimale Tastaturcode der gedrückten Taste in einem Formularfeld ausgegeben.

Beachten Sie, dass sich die Werte von keyCode und which bei keypress und keydown unterscheiden. In diesem Demo-Script können Sie dies noch einmal vergleichen.

Es werden zwei Funktionen definiert: Die Funktion TasteGedrueckt() ist die so genannte Handler-Funktion für den Fall, dass der Anwender eine Taste drückt. Die Funktion TasteLosgelassen() behandelt den Fall, dass der Anwender die gedrückte Taste wieder loslässt. Beide Funktionen erwarten einen Parameter namens Ereignis. Über diesen Parameter können die Funktionen auf Eigenschaften des Event-Objekts zugreifen.

Damit die Handler-Funktionen bei Eintritt des Ereignisses automatisch aufgerufen werden, muss die Ereignisüberwachung gestartet werden. Dazu dienen die beiden Anweisungen am Anfang des JavaScript-Bereichs. Mit elem.addEventListener("keydown", TasteGedrückt ); wird das Ereignis "Taste gedrückt" (keydown) dokumentweit überwacht. Hinter dem Beistrich folgt der Name der Handler-Funktion, die dieses Ereignis verarbeiten soll (TasteGedrueckt). Beachten Sie, dass hier nur der Funktionsname stehen darf, kein Funktionsaufruf mit runden Klammern dahinter.

Mit elem.addEventListener("keyup", TasteLosgelassen); wird das Ereignis "Taste losgelassen" (keyup) dokumentweit überwacht, und zur Ereignisbehandlung wird die Handler-Funktion TasteLosgelassen angegeben. Nach dem gleichen Schema können Sie auch andere Ereignisse überwachen – die Handler-Funktionen definieren Sie selber, und anstelle von keydown und keyup können Sie alle anderen üblichen Event-Handler notieren.

Beachten Sie: Wenn Sie Ereignisse dokumentweit überwachen, müssen Sie berücksichtigen, dass die Ereignisüberwachung zu unerwünschten Nebenwirkungen führen kann.
Einige Anzeigebeispiele auf dieser Seite zeigen bei einem Mausereignis im Dokument ein Meldungsfenster oder verschieben ein Element an die Mausposition. Dies kann unter Umständen verhindern, dass Verweise auf der Seite angeklickt werden können. In der praktischen Anwendung sollten Sie daher auf eine solche dokumentweite Ereignisüberwachung verbunden mit Meldungsfenstern verzichten. In den meisten Fällen reicht es aus, Ereignisse für einzelne Elemente zu überwachen.

Quellen

• JavaScript Madness: Keyboard Events (von Jan Wolter)