Signatur
Beschreibung
Die schreibgeschützte Eigenschaft dataTransfer eines InputEvent liefert die Daten, die eine Eingabe gerade in ein contenteditable-Element einfügt. Das passiert etwa beim Einfügen aus der Zwischenablage, beim Ablegen per Drag-and-drop oder wenn die Rechtschreibprüfung ein Wort ersetzt. Die Daten stehen als DataTransfer-Objekt bereit. Über getData() lesen Sie die Formate text/plain oder text/html aus.
Einen Wert ungleich null gibt es nur, wenn das Ziel ein contenteditable-Element ist und inputType einen dieser Werte hat:
insertFromPasteinsertFromPasteAsQuotationinsertFromDropinsertTransliterationinsertReplacementTextinsertFromYank
In allen anderen Fällen ist der Wert null. Das gilt auch für <input> und <textarea>: Dort steht der Text in InputEvent.data.
Am nützlichsten ist die Eigenschaft im Ereignis beforeinput. Dort können Sie die eingehenden Daten prüfen, bereinigen oder mit preventDefault() ganz abweisen, bevor sich das DOM ändert. So lässt sich zum Beispiel HTML beim Einfügen in reinen Text umwandeln. Im Ereignis input hat die Änderung schon stattgefunden. Dort eignet sich die Eigenschaft nur noch für Auswertungen.
Rückgabewert
DataTransfer-Objekt mit den eingefügten Daten, z. B. in den Formaten text/plain und text/html. Wenn der Eingabetyp keine übertragenen Daten hat oder das Ziel kein contenteditable-Element ist, lautet der Wert null.Beispiele
Eingefügte Daten protokollieren
const editor = document.querySelector('#editor'); // <div id="editor" contenteditable>
editor.addEventListener('beforeinput', (event) => {
if (event.inputType !== 'insertFromPaste') return;
const dt = event.dataTransfer;
if (!dt) return;
console.log('Formate:', dt.types);
console.log('Text:', dt.getData('text/plain'));
console.log('HTML:', dt.getData('text/html'));
});Beim Einfügen und Ablegen nur reinen Text zulassen
const editor = document.querySelector('#editor');
const insertPlainText = (event) => {
const types = ['insertFromPaste', 'insertFromDrop'];
if (!types.includes(event.inputType) || !event.dataTransfer) return;
event.preventDefault(); // Standard-Einfügen (mit HTML) verhindern
const text = event.dataTransfer.getData('text/plain');
// Zielbereich bestimmen: bevorzugt getTargetRanges(), sonst aktuelle Auswahl
const selection = window.getSelection();
const [target] = event.getTargetRanges();
const range = document.createRange();
if (target) {
range.setStart(target.startContainer, target.startOffset);
range.setEnd(target.endContainer, target.endOffset);
} else if (selection.rangeCount) {
range.setStart(selection.getRangeAt(0).startContainer, selection.getRangeAt(0).startOffset);
range.setEnd(selection.getRangeAt(0).endContainer, selection.getRangeAt(0).endOffset);
} else {
return;
}
range.deleteContents();
const node = document.createTextNode(text);
range.insertNode(node);
// Cursor hinter den eingefügten Text setzen
range.setStartAfter(node);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
};
editor.addEventListener('beforeinput', insertPlainText);
// Später wieder entfernen, z. B. beim Wechsel in einen Rich-Text-Modus
// editor.removeEventListener('beforeinput', insertPlainText);Unterschied zwischen textarea und contenteditable
const textarea = document.querySelector('textarea');
const editable = document.querySelector('[contenteditable]');
const report = (event) => {
console.log(
event.target.tagName,
event.inputType,
'dataTransfer:', event.dataTransfer ? 'vorhanden' : null,
'data:', event.data
);
};
textarea.addEventListener('input', report);
editable.addEventListener('input', report);
// Nach dem Einfügen von „Hallo“ in beide Felder: