InputEvent: dataTransfer プロパティ

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.

dataTransfer は InputEvent インターフェイスの読み取り専用プロパティで、このプロパティは、編集可能なコンテンツに追加または削除されたリッチテキストまたはプレーンテキストデータに関する情報を含む DataTransfer オブジェクトを返します。

値

DataTransfer オブジェクトです。

例

次の単純な例では、input イベントにイベントリスナーを設定して、コンテンツが contenteditable の <p> 要素に貼り付けられると、その HTML ソースを InputEvent.dataTransfer.getData() メソッドを介して取得して入力欄の下に続く段落で報告するようにしています。

指定されたコンテンツの一部をコピー＆ペーストして、その効果を確かめてみてください。

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>

const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");

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

仕様書

Specification
Input Events Level 2 # dom-inputevent-datatransfer

ブラウザーの互換性

BCD tables only load in the browser