TextEvent.data — Eigenschaft · JavaScript-Referenz

Signatur

TextEvent.data

Beschreibung

TextEvent.data ist eine schreibgeschützte Zeichenkette am TextEvent-Objekt. Sie enthält die Zeichen, die durch eine Texteingabe gerade in ein editierbares Element eingefügt werden, zum Beispiel in ein <input>, eine <textarea> oder ein Element mit contenteditable. Meist ist das ein einzelnes Zeichen. Beim Einfügen aus der Zwischenablage, bei der Autokorrektur oder beim Abschluss einer IME-Komposition (etwa bei chinesischer oder japanischer Eingabe) können es aber auch mehrere Zeichen sein.

Ein TextEvent entsteht beim nicht standardisierten Ereignis textInput. Es wird vor der Änderung am Dokument ausgelöst und lässt sich mit preventDefault() abbrechen. So kann man die Eingabe prüfen oder unerwünschte Zeichen blockieren.

Das Interface ist veraltet und existiert nur noch für die Kompatibilität mit älterem Code. In neuem Code sollte man das Ereignis beforeinput mit InputEvent.data und InputEvent.inputType verwenden. Es bietet dieselben Möglichkeiten, ist standardisiert und unterscheidet genauer zwischen den Eingabearten, also Tippen, Einfügen, Löschen und so weiter.

Rückgabewert

Typ

string

Beschreibung

Der einzufügende Text. Meist ist das ein Zeichen, beim Einfügen oder bei IME-Eingaben können es mehrere sein. Wurde das Ereignis mit initTextEvent() ohne Daten erzeugt, ist es eine leere Zeichenkette.

Beispiele

Eingegebene Zeichen protokollieren

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

feld.addEventListener('textInput', (event) => {
  // event ist ein TextEvent, event.data enthält den einzufügenden Text
  console.log(`Eingabe: "${event.data}"`);
});

Eingabe: "H" Eingabe: "a" Eingabe: "llo" // z. B. beim Einfügen

Nur Ziffern zulassen (Legacy-Variante)

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

const nurZiffern = (event) => {
  if (!/^\d+$/.test(event.data)) {
    event.preventDefault(); // Eingabe verwerfen
    console.warn(`Ungültige Eingabe verworfen: ${event.data}`);
  }
};

plz.addEventListener('textInput', nurZiffern);

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

Ungültige Eingabe verworfen: a

Moderne Alternative mit beforeinput und InputEvent.data

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

plz.addEventListener('beforeinput', (event) => {
  // Nur Einfügungen prüfen, Löschen bleibt erlaubt
  if (event.inputType.startsWith('insert') && event.data && !/^\d+$/.test(event.data)) {
    event.preventDefault();
  }
});

Unterstützung per Feature-Erkennung prüfen

const hatTextEvent = typeof window.TextEvent === 'function' && 'data' in TextEvent.prototype;
const hatBeforeInput = 'onbeforeinput' in document.documentElement;

console.log({ hatTextEvent, hatBeforeInput });

{ hatTextEvent: true, hatBeforeInput: true }

// Wichtig · Fallstricke

Veraltet: TextEvent und das Ereignis textInput gehören zu keinem aktuellen Standard. Verwende in neuem Code beforeinput mit InputEvent.data.
Kompatibilität: Chromium-Browser und Safari unterstützen das Interface schon lange, Firefox erst ab Version 126. Ältere Firefox-Versionen lösen textInput nicht aus. Deshalb solltest du dich nie allein darauf verlassen.
Es gibt keine Eigenschaft ontextinput. Du musst den Handler mit addEventListener('textInput', …) registrieren. Achte auf das große „I“ im Ereignisnamen.
Löschen (Rücktaste, Entf) und Zeilenumbrüche lösen in der Regel kein textInput aus. Eine Validierung allein über data ist deshalb lückenhaft. Prüfe den endgültigen Wert zusätzlich beim Absenden.
Bei IME-Kompositionen wird das Ereignis erst mit dem fertigen Text ausgelöst. Einzelne Tastendrücke erscheinen nicht in data.
Eine clientseitige Filterung ersetzt keine Prüfung auf dem Server, denn sie lässt sich leicht umgehen.

Siehe auch

BlobEvent.data InputEvent.data PushEvent.data MessageEvent.data TimeEvent.detail