InputEvent: dataTransfer 属性

dataTransfer 属性是 InputEvent 接口的只读属性，它返回一个 DataTransfer 对象，其中包含有关添加到或从可编辑内容中删除的富文本或纯文本数据的信息。

值

一个 DataTransfer 对象或 null。规范中有一个关于其在各种情况下的值的概述。

示例

在以下简单示例中，我们在 input 事件上设置了一个事件监听器，以便当任何内容粘贴到可编辑的 <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");
});

规范

规范
输入事件级别 2 # dom-inputevent-datatransfer

浏览器兼容性

BCD 表格仅在浏览器中加载