keydown, keyup – Events der Tastatur

Keyboard-Events

Das Abfragen einzelner Zeichen der Tastatur ist eher ein Spezialfall in Webseiten, meist reicht der fertige Text in einem Eingabefeld. Gebraucht werden Werte zur Steuerung mit den Pfeiltasten, die Enter-Taste als Eingabestätigung oder die Tab-Taste als Navigation in einem Slider.

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 Steuer- oder Metataste wie SHIFT, ESC, DEL, bei Pfeiltasten ↓, ↑, →, ← oder Tottaste ´(Accent aigu).

Die Tastatur der Touchscreens

Tastatur-Ereignisse waren in den Anfangszeiten von HTML und Javascript zu kompliziert, um sie in einen generellen Standard einzubinden. Natürlich sind die Keyboard-Events heute nicht einfacher geworden: Verschiedene Sprachen und mobile Geräte mit grafischen (virtuellen) Tastaturen erschweren die Indentifikation von Tastatur-Events.

Auf der virtuellen Tastatur werden keydown und keyup nicht unbedingt ausgelöst, manche Browser liefern nur input-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 Code für diese Tasten.

Eigenschaften von Tastatur-Ereignissen

Wenn sich das Skript um 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.

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

Codes 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:

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 – evt.key === "Enter" – abgefangen werden.

document.getElementById('form').addEventListener ('keydown', (evt) => {
	if (evt.key === "Enter") {
		event.preventDefault();
		const field = event.target;
		if (field.getAttribute('data-index')) {
			const 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">