Element: paste event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The paste event of the Clipboard API is fired when the user has initiated a "paste" action through the browser's user interface.
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.
This event bubbles up the DOM tree, eventually to Document and Window, is cancelable and is composed.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("paste", (event) => { })
onpaste = (event) => { }
Event type
A ClipboardEvent. Inherits from Event.
Examples
Live example
HTML
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
JavaScript
const target = document.querySelector("div.target");
target.addEventListener("paste", (event) => {
event.preventDefault();
let paste = (event.clipboardData || window.clipboardData).getData("text");
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
selection.collapseToEnd();
});
Result
Specifications
| Specification |
|---|
| Clipboard API and events # clipboard-event-paste |
| HTML # handler-onpaste |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
paste event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support