keydown, keyup und keypress – Events der Tastatur

Javascript onkeydown, onkeyup, onkeypress

onkeydown, onkeypress und onkeyup (in dieser Reihenfolge) werden vom einfachen Drücken und Loslassen einer Taste auf der Tastatur erzeugt. onkeydown und onkeypress feuern kontinuierlich so lang der Benutzer die Taste gerückt hält. Wenn der Benutzer die Taste loslässt, feuert onkeyup ein einziges Mal.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Keyboard-Events

keydown feuert, wenn der Benutzer eine Taste auf der Tastatur herunterdrückt.

keyup feuert, wenn der Benutzer eine Taste auf der Tastatur losgelassen hat. Der Klassiker: Entdecken, dass der Benutzer eine Eingabe in einem Formularfeld getätigt hat.

keypress feuert, wenn der Benutzer eine Taste auf der Tastatur herunterdrückt oder festhält. keypress hängt in einem hohen Ausmaß vom verwendeten Gerät ab, gilt als veraltet und soll nicht mehr genutzt werden.

keydown feuert auch beim Drücken einer Steuertaste wie Shift, Esc, DEL, bei Pfeiltasten oder Tottaste (Accent aigu), keypress hingegen nicht.

In der DOM Level 2-Empfehlung waren noch keine Tastatur-Ereignisse zu finden, denn sie waren anfangs zu kompliziert, um sie in einen generellen Standard einzubinden. Aber Tastatur-Ereignisse sind fundamental, sind in allen modernen Browsern implementiert und schon der HTML 4-Standard erlaubte keydown, keypress und keyup-Ereignisse für viele Elemente.

Natürlich sind die Keyboard-Events heute nicht einfacher geworden: Verschiedene Sprachen und mobile Geräte mit grafischen Tastaturen erschweren die Indentifikation von Tastatur-Events.

Eigenschaften von Tastatur-Ereignissen

Wenn sich das Skript um keypress, keyup und keydown kümmert, geht es meist um den Wert der Taste. In Formularen könnte z.B. die Enter-Taste das Formular auch ohne SUBMIT absenden, in Spielen bewegen die Tasten ▲, ▶, ▼ und ◀ den Cursor.

keyGibt den Wert der Taste zurück. Wird von alten Browsern u.U. nicht unterstützt.
codeGibt einen numerischen Wert der Taste zurück. Wichtig für Steuertasten wie ENTER.
repeatGibt true zurück, wenn eine Taste dauerhaft gehalten wird.
shiftKeyGibt true zurück, wenn die SHIFT-Taste zusätzlich gedrückt wird.
ctrlKeyGibt true zurück, wenn die CTRL-Taste zusätzlich gedrückt wird.
altKeyGibt true zurück, wenn die ALT-Taste zusätzlich gedrückt wird (Option-Taste unter Mac OS).
keyCode (deprecated)Gibt einen Namen für die gedrückte Taste zurück, z.B. "Digit7" oder "Numpad7" bei einer Zahl oder "KeyP" für einen Buchstaben
charCode (deprecated)gibt einen Unicode-Wert als Symbol für die gedrückte Taste zurück.
document.querySelector(".input1").addEventListener ("keyup", (evt) => {
	if (evt.key === "Enter") {
		console.log ("Bingo!")
	}
});

Attribute

type (string, readonly, case-insensitive, muss ein XML-Name sein)
Typ des Ereignisses
target (readonly)
Objekt zu dem das Ereignis ursprünglich gesendet wurde
which
Die gedrückte Taste als Ascii-Wert

Keycodes beim Drücken einer Taste

Bei einem Tastatur-Ereignis wird ein numerischer Code für die jeweilige Taste erzeugt. Für die Taste „A“ ist das z.B. die Zahl 65. Dieselbe Taste erzeugt mindestens zwei Zeichen, nämlich „A“ und „a“, je nachdem, ob die Shift-Taste gedrückt wurde oder nicht. Auf einem Mac erzeugt die A-Taste noch weitere Zeichen, wenn die Alt-Taste zusätzlich gedrückt wird.

Kleine und große Zeichen eingeben:

KEYDOWN
KEYPRESS
KEYUP

Return in Formularen abfangen

Damit die Eingabefelder das Formular bei einem Return nicht absenden, sondern das jeweils nächste Eingabefeld automatisch in den Fokus setzen, muss das Drücken der Entertaste – Keycode 13 – abgefangen werden.

document.getElementById('form').addEventListener ('keydown', function (event) {
   if (event.which == 13) {
      event.preventDefault();
      let field = event.target;
      if (field.getAttribute('data-index')) {
         let next = document.getElementById(field.getAttribute('data-index'));
         next.focus();
      }
   }
});

Welches Eingabefeld jeweils angesteuert wird, entscheidet das data-Attribut.

<input type="text" id="num1" data-index="num2">
<input type="text" id="num2" data-index="num3">

Mobile Geräte: Tastatur- oder Keyboard-Events

Das Abfragen der Keyboard-Events ist nicht immer zuverlässig. Auf Tabletts oder Smartphones wird das Drücken der Shift-Taste nicht unbedingt abgefangen und eine Unterscheidung in Groß- und Kleinschreibung kann schwer fallen. Ein iPhone hat zwar Tasten für ü, ö, ä und ß, aber meldet »0« als Keycode für diese Tasten.