InputEvent: dataTransfer 屬性
InputEvent 介面的只讀屬性 dataTransfer 返回一個 DataTransfer 物件，其中包含有關新增到或從可編輯內容中移除的富文字或純文字資料的資訊。
值
一個 DataTransfer 物件或 null。該規範在其 概述 中說明了其在各種情況下的值。
示例
在下面的簡單示例中，我們在 input 事件上設定了一個事件監聽器，以便當任何內容被貼上到 contenteditable <p> 元素中時，可以透過 InputEvent.dataTransfer.getData() 方法檢索其 HTML 源，並在輸入框下方的段落中報告。
嘗試複製貼上提供的一些內容，看看效果。
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 |
瀏覽器相容性
載入中…