InputEvent: dataTransfer-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die schreibgeschützte dataTransfer-Eigenschaft der InputEvent-Schnittstelle gibt ein DataTransfer-Objekt zurück, das Informationen über Richtext- oder Klartextdaten enthält, die dem bearbeitbaren Inhalt hinzugefügt oder daraus entfernt werden.

Wert

Ein DataTransfer-Objekt oder null. Die Spezifikation enthält eine Übersicht über seinen Wert in verschiedenen Fällen.

Beispiele

Im folgenden einfachen Beispiel haben wir einen Event-Listener für das input-Ereignis eingerichtet. Wenn Inhalte in das contenteditable <p>-Element eingefügt werden, wird dessen HTML-Quelle über die InputEvent.dataTransfer.getData()-Methode abgerufen und im Absatz unter der Eingabe gemeldet.

Versuchen Sie, einige der bereitgestellten Inhalte zu kopieren und einzufügen, um die Effekte zu sehen.

html
<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p>
  <span style="font-style: italic; color: red">Exciting: italic red text!</span>
</p>
<p>Boring normal text ;-(</p>

<hr />

<p contenteditable="true">
  Go on, try pasting some content into this editable paragraph and see what
  happens!
</p>

<p class="result"></p>
js
const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = e.dataTransfer.getData("text/html");
});

Spezifikationen

Specification
Input Events Level 2
# dom-inputevent-datatransfer

Browser-Kompatibilität

BCD tables only load in the browser