The dataTransfer
read-only property of the InputEvent
interface returns a DataTransfer
object containing information about richtext or plaintext data being added to or removed from editible content.
Syntax
var dataTransfer = inputEvent.dataTransfer
Value
A DataTransfer
object.
Examples
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');
});
Specifications
Specification | Status | Comment |
Input Events Level 2The definition of 'dataTransfer' in that specification. | Working Draft | Initial definition. |
Browser Compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 60 |
Edge
Full support 79 |
Firefox
Full support 67 |
IE
No support No |
Opera
Full support 47 |
Safari
No support No |
WebView Android
Full support 60 |
Chrome Android
Full support 60 |
Firefox Android
Full support 67 |
Opera Android
Full support 44 |
Safari iOS
No support No |
Samsung 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.
InputEvent.dataTransfer by Mozilla Contributors is licensed under CC-BY-SA 2.5.