这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
dataTransfer
只读特性在
InputEvent
interface returns a
DataTransfer
object containing information about richtext or plaintext data being added to or removed from editible content.
var dataTransfer = inputEvent.dataTransfer
A
DataTransfer
对象。
In the following simple example we've set up an event listener on the
input
event so that when any content is pasted into the contenteditable
<p>
element, its HTML source is retrieved via the
InputEvent.dataTransfer.getData()
method and reported in the paragraph below the input.
Try copying and pasting some of the content provided to see the effects.
<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>
var editable = document.querySelector('p[contenteditable]');
var result = document.querySelector('.result')
var dataTransferObj;
editable.addEventListener('input', (e) => {
result.textContent = e.dataTransfer.getData('text/html');
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
Input Events Level 2
The definition of 'dataTransfer' in that specification. |
工作草案 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
dataTransfer
|
Chrome 60 | Edge 79 | Firefox 67 | IE 不支持 No | Opera 47 | Safari 不支持 No | WebView Android 60 | Chrome Android 60 | Firefox Android 67 | Opera Android 44 | Safari iOS 不支持 No | Samsung Internet Android 8.0 |
完整支持
不支持
实验。期望将来行为有所改变。
InputEvent
data
dataTransfer
inputType
isComposing