JavaScript/DOM/Event/keydown

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

Der keydown-Event-Handler Der Eventhandler keydown wird bei gedrückter Taste ausgelöst.

bubbles

ja

cancelable

ja

mögliche Auslöser

allen Elementen,
außer im head

Event-Objekt

KeyboardEvent

Beispiel ansehen …
function Aktualisieren () {
    var ausgabe = document.Test.Eingabe.value.length + 1;
    var elem = document.getElementById('kontrolle');
    elem.innerHTML = 'Schon <span> ' + ausgabe +' </span> Zeichen!';
    return true;
}

Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein. Damit der Anwender nicht mitzählen muss, wird nach jedem Tastendruck ausgegeben, wie viele Zeichen bereits eingegeben wurden.

Dazu ist in dem Eingabefeld mit Namen Eingabe der Event-Handler keydown notiert. Er bewirkt, dass, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die Funktion Aktualisieren() aufgerufen wird, die im Dateikopf in einem Script-Bereich definiert ist.

Diese Funktion errechnet aus document.Test.Eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe.

Beachten Sie: Auf Touch-Geräten kann es zu Problemen mit der Erfassung von Tastatur-Eingaben kommen, da das Drücken der Umschalt-Taste nicht erfasst wird und es so zu Problemen mit der Groß-/Kleinschreibung kommen kann.

Folgende Attribute sind möglich:

  • char: Zeichenwert der gedrückten Taste
  • key: Zeichenwert der gedrückten Taste
  • type
  • target: Das Objekt, zu dem der Event gesendet wurde
  • which: ASCII-Wert der gedrückten Taste
Beachten Sie: Diese Eigenschaften sind sowohl deprecated (charcode, keycode, which) als auch nicht vollständig implementiert (char, key).[1] Lesen Sie dazu JavaScript/DOM/Event/Tastaturabfragen.
Empfehlung: Die Event-Handler für Tastatureingaben waren lange in keinem Standard zu finden, da es in Unix-System abweichende Verhalten gab.[2]. Trotzdem konnten sie problemlos eingesetzt werden und sind mittlerweile im DOM3 spezifiziert.[3]


  1. MDN: keydown properties
  2. MDN: Auto-repeat_handling
  3. W3C: event-type-keydown