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
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