InputEvent.dataTransfer
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 editable 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
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
dataTransfer |
60 |
79 |
67 |
No |
47 |
10.1 |
60 |
60 |
67 |
44 |
10.3 |
8.0 |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/dataTransfer