Element: keypress — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("keypress", handler)

Beschreibung

Das keypress-Ereignis wird ausgelöst, wenn eine Taste gedrückt wird, die einen Zeichenwert erzeugt, also Buchstaben, Ziffern, Satzzeichen und Symbole. Die Enter-Taste löst es ebenfalls aus, auch zusammen mit Shift oder Ctrl. Reine Modifikatortasten wie Alt, Shift, Ctrl oder Meta sowie Pfeiltasten, Esc, Backspace und Funktionstasten lösen kein keypress aus.

Der Handler bekommt ein KeyboardEvent. Die wichtigsten Eigenschaften sind event.key (das erzeugte Zeichen, z. B. "a" oder "A"), event.code (die physische Taste, z. B. "KeyA") sowie shiftKey, ctrlKey, altKey und metaKey. Das Ereignis steigt im DOM auf (Bubbling) und lässt sich mit preventDefault() abbrechen. Dann wird das Zeichen nicht in ein Eingabefeld eingefügt.

Registriert wird es entweder mit addEventListener("keypress", handler) oder über die Eigenschaft element.onkeypress = handler. Es feuert nur auf Elementen, die den Fokus haben können (Eingabefelder, contenteditable, Elemente mit tabindex), oder auf document bzw. window.

Wichtig: keypress ist in der Spezifikation als veraltet markiert. Für Tastenkürzel und die Steuerung per Tastatur nimmt man keydown. Um Texteingaben zu prüfen oder abzufangen, eignet sich beforeinput bzw. input besser. Diese Ereignisse funktionieren auch bei Eingabemethoden (IME), Einfügen aus der Zwischenablage und Bildschirmtastaturen zuverlässig.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"keypress"`.
$handler Pflicht	(event: KeyboardEvent) => void		Callback, der ein `KeyboardEvent` bekommt.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `capture`, `once`, `passive` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein KeyboardEvent.

Beispiele

Zeichen per addEventListener protokollieren

const input = document.querySelector('#name');

input.addEventListener('keypress', (event) => {
  console.log(`key: ${event.key}, code: ${event.code}`);
});

key: A, code: KeyA (bei Shift + A)

Nur Ziffern zulassen (Legacy-Ansatz)

const plz = document.querySelector('#plz');

const nurZiffern = (event) => {
  if (!/^[0-9]$/.test(event.key)) {
    event.preventDefault(); // Zeichen wird nicht eingefügt
  }
};

plz.addEventListener('keypress', nurZiffern);

// Später wieder entfernen
// plz.removeEventListener('keypress', nurZiffern);

Enter über die on-Property abfangen

const suche = document.querySelector('#suche');

suche.onkeypress = (event) => {
  if (event.key === 'Enter') {
    event.preventDefault();
    console.log('Suche nach:', suche.value);
  }
};

// Handler entfernen
// suche.onkeypress = null;

Suche nach: javascript

Moderne Alternative: keydown und beforeinput

const feld = document.querySelector('#plz');

// Texteingabe prüfen – funktioniert auch beim Einfügen und mit IME
feld.addEventListener('beforeinput', (event) => {
  if (event.data && /\D/.test(event.data)) {
    event.preventDefault();
  }
});

// Tastenkürzel mit keydown
document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Speichern ausgelöst');
  }
});

Speichern ausgelöst

// Wichtig · Fallstricke

Veraltet: keypress ist deprecated. Neuer Code sollte keydown (Tasten, Kürzel) oder beforeinput/input (Texteingabe) verwenden.
Nicht ausgelöst wird es für Modifikatortasten, Pfeiltasten, Esc, Backspace, Delete und F-Tasten. Hier bleibt nur keydown.
Veraltete Eigenschaften: Die Eigenschaften event.keyCode, event.charCode und event.which sind veraltet und verhalten sich je nach Browser unterschiedlich. Nimm stattdessen event.key und event.code.
IME und Mobilgeräte: Bei Eingabemethoden (z. B. Chinesisch oder Japanisch) und auf Android-Bildschirmtastaturen feuert keypress oft gar nicht oder nicht zuverlässig. event.key kann dort "Unidentified" sein.
Eingabeprüfung ist nicht vollständig: Einfügen per Zwischenablage oder Drag & Drop umgeht keypress komplett. Prüfe Eingaben deshalb zusätzlich serverseitig oder über input.
Reihenfolge: keydown → keypress → beforeinput → input → keyup. Ein preventDefault() in keydown verhindert auch das keypress.
Browser: Chrome, Firefox, Safari und Edge unterstützen das Ereignis weiterhin aus Kompatibilitätsgründen.

Siehe auch

KeyboardEvent KeyboardEvent.key EventTarget.addEventListener() Element: keydown Element: keyup