InputEvent.dataTransfer - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

语法

var dataTransfer = inputEvent.dataTransfer

返回值

一个 DataTransfer 对象。

示例

在下面的简单示例中，我们在 input 事件上设置了一个事件监听器，以便在将任何内容粘贴到 <p> 元素时，通过 InputEvent.dataTransfer.getData() 方法检索其HTML源代码，并在输入框下面的段落中报告。

尝试复制并粘贴提供的部分内容以查看效果。注意，部分浏览器对其支持不佳。

<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p><span style="font-weight: 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>

var editable = document.querySelector('p[contenteditable]');
var result = document.querySelector('.result')
var dataTransferObj;

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

规范

浏览器兼容性

BCD tables only load in the browser