Signatur
Beschreibung
Die schreibgeschützte Eigenschaft data der Schnittstelle InputEvent enthält die Zeichen, die bei einer Eingabe hinzugefügt wurden. Beim Tippen ist das meist ein einzelnes Zeichen, beim Einfügen per Tastatur oder Autokorrektur auch ein längerer String. Werden Zeichen dagegen gelöscht, etwa mit Rücktaste oder Entf, ist der Wert null.
Sinnvoll ist data vor allem in Verbindung mit beforeinput: Dort sieht man, was eingefügt werden soll, bevor das DOM verändert wird. Mit event.preventDefault() lassen sich dann unerwünschte Zeichen abweisen. Beim input-Event ist die Änderung schon geschehen. data eignet sich dort zum Beispiel für Zeichenzähler, Tipp-Statistiken oder Live-Vorschauen.
Was data enthält, hängt von inputType ab. Bei insertText und insertCompositionText steht dort der Text. Bei insertFromPaste, insertFromDrop und bei Formatierungen in contenteditable-Elementen ist data je nach Browser und Elementtyp oft null. In diesem Fall steckt der Inhalt in event.dataTransfer, bei Formatierungsbefehlen fehlt er ganz. Deshalb sollte man immer auch inputType prüfen.
Rückgabewert
dataTransfer steht oder die gar keinen Text haben, ist der Wert null. Während einer IME-Komposition kann auch ein leerer String "" vorkommen.Beispiele
Eingegebene Zeichen protokollieren
const feld = document.querySelector('#name');
feld.addEventListener('input', (event) => {
console.log(`Typ: ${event.inputType}, Daten: ${JSON.stringify(event.data)}`);
});
// Benutzer tippt "a", danach RücktasteNur Ziffern zulassen mit beforeinput
const plz = document.querySelector('#plz');
plz.addEventListener('beforeinput', (event) => {
// Löschen und Einfügen ohne Text immer erlauben
if (event.data === null) return;
if (!/^\d+$/.test(event.data)) {
event.preventDefault();
console.warn(`Abgelehnt: "${event.data}"`);
}
});Getippte Zeichen zählen (ohne Löschungen)
const editor = document.querySelector('[contenteditable]');
let getippt = 0;
editor.addEventListener('input', (event) => {
if (event.inputType === 'insertText' && event.data) {
getippt += event.data.length;
console.log(`Bisher getippt: ${getippt} Zeichen`);
}
});Eingefügten Text auch aus dataTransfer lesen
const bereich = document.querySelector('#notiz');
const eingefuegterText = (event) =>
event.data ?? event.dataTransfer?.getData('text/plain') ?? '';
bereich.addEventListener('beforeinput', (event) => {
if (event.inputType.startsWith('insert')) {
console.log('Wird eingefügt:', eingefuegterText(event));
}
});// Wichtig · Fallstricke
- Ein
null-Wert muss eingeplant sein: Beim Löschen, bei Formatierungen und teils beim Einfügen oder Ziehen istdatanull. Ein ungeprüfter Zugriff wieevent.data.lengthwirft dann einenTypeError. - IME-Komposition: Bei chinesischer oder japanischer Eingabe und auf vielen mobilen Tastaturen liefert
insertCompositionTextZwischenstände.datakann dann den ganzen bisherigen Kompositionstext enthalten statt nur eines Zeichens. Mitevent.isComposinglässt sich das erkennen. EinpreventDefault()inbeforeinputhat während einer Komposition oft keine Wirkung. - Kein Ersatz für eine Prüfung auf dem Server: Eine Filterung über
datadient nur dem Bedienkomfort und lässt sich leicht umgehen. Den tatsächlichen Wert immer serverseitig prüfen und ihn nie ungefiltert perinnerHTMLausgeben (XSS). - Browser-Unterschiede: Wird ein Event per
new Event('input')ausgelöst, ist es keinInputEventund hat keinedata-Eigenschaft. ObdatabeiinsertFromPastebefüllt ist, hängt vom Browser ab: bei<input>und<textarea>meist ja, beicontenteditableoft nein. Dasbeforeinput-Event wird in allen modernen Browsern unterstützt, in Firefox erst seit Version 87.