InputEvent: dataTransfer プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
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>
js
const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");
editable.addEventListener("input", (e) => {
result.textContent = e.dataTransfer.getData("text/html");
});
仕様書
| 仕様書 |
|---|
| Input Events Level 2 # dom-inputevent-datatransfer |