Tastatur-Events

Tastatur-Events reagieren auf Tastendrücke – zum Beispiel beim Tippen in einem Eingabefeld, bei Shortcuts oder beim Bestätigen mit Enter. Sie sind wichtig für Formulare, Suche und barrierefreie Bedienung.

Das keydown-Event

Das keydown-Event wird ausgelöst, sobald der Nutzer eine Taste drückt. Über event.key siehst du, welche Taste es war – zum Beispiel a, Enter oder Escape.

Typischer Einsatz: Suche starten, Shortcuts auslösen oder auf bestimmte Tasten reagieren.

1<input type="text" id="suche" placeholder="Suche...">

1const suche = document.getElementById("suche");
2
3suche.addEventListener("keydown", function(event) {
4    console.log("Gedrückte Taste:", event.key);
5
6    if (event.key === "Enter") {
7        console.log("Suche starten!");
8    }
9});

Weitere Tastatur-Events

Neben keydown gibt es weitere Tastatur-Events. Du registrierst sie genauso mit addEventListener() – du tauschst nur den Event-Namen aus.

Wichtige Eigenschaften im Event-Objekt:

• event.key – welche Taste gedrückt wurde (z. B. Enter, a)
• event.code – physische Taste auf der Tastatur (z. B. KeyA, Enter)

Merksatz: Für Shortcuts und Steuer-Tasten nutzt du meist keydown. Für normale Texteingabe reicht oft das input-Event – dazu mehr im Kapitel Formular-Events.