Element: paste event
The paste
event 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.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("paste", (event) => {});
onpaste = (event) => {};
Event type
A ClipboardEvent
. Inherits from Event
.
Examples
Live example
HTML
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
js
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 Standard # handler-onpaste |
Browser compatibility
BCD tables only load in the browser