InputEvent.dataTransfer

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

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');
});

规范

Specification Status Comment
Input Events Level 2
dataTransfer
Working Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dataTransfer
Experimental
Chrome Full support 60Edge Full support 79Firefox Full support 67IE No support NoOpera Full support 47Safari No support NoWebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 67Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 8.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.