The paste
event is fired when the user has initiated a "paste" action through the browser's user interface.
Bubbles | Yes |
Cancelable | Yes |
Interface | ClipboardEvent
|
Event handler property | onpaste
|
If the cursor is in an editable context (for example, in a <textarea>
or an element with contenteditable
attribute set to true
) then the default action is to insert the contents of the clipboard into the document at the cursor position.
A handler for this event can access the clipboard contents by calling getData()
on the event's clipboardData
property.
To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventDefault()
, and then insert its desired data manually.
It's possible to construct and dispatch a synthetic paste
event, but this will not affect the document's contents.
Examples
Live example
HTML
<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
CSS
div.source, div.target {
border: 1px solid gray;
margin: .5rem;
padding: .5rem;
height: 1rem;
background-color: #e9eef1;
}
JS
const target = document.querySelector('div.target');
target.addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
event.preventDefault();
});
Result
Specifications
Specification | Status |
---|---|
Clipboard API and events | Working Draft |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
paste event
|
Chrome
Full support 58 |
Edge
Full support 12 |
Firefox
Full support 22 |
IE
Full support 11 |
Opera
Full support 45 |
Safari
Full support 5 |
WebView Android
Full support 58 |
Chrome Android
Full support 58 |
Firefox Android
Full support 22 |
Opera Android
Full support 43 |
Safari iOS
Full support 4.2 |
Samsung Internet Android
Full support 7.0 |
clipboardData
|
Chrome
Full support 58 |
Edge
Full support ≤18 |
Firefox
Full support 22 |
IE
No support No |
Opera
Full support 45 |
Safari
Full support Yes |
WebView Android
Full support 58 |
Chrome Android
Full support 58 |
Firefox Android
Full support 22 |
Opera Android
Full support 43 |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 7.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
Element: paste event by Mozilla Contributors is licensed under CC-BY-SA 2.5.