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 |
浏览器兼容性
加载中…