Element: copy event
The copy
event fires when the user initiates a copy action through the browser's user interface.
The event's default action is to copy the selection (if any) to the clipboard.
A handler for this event can modify the clipboard contents by calling setData(format, data)
on the event's ClipboardEvent.clipboardData
property, and cancelling the event's default action using event.preventDefault()
.
However, the handler cannot read the clipboard data.
It's possible to construct and dispatch a synthetic copy
event, but this will not affect the system clipboard.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("copy", (event) => {});
oncopy = (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 source = document.querySelector("div.source");
source.addEventListener("copy", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
event.preventDefault();
});
Result
Specifications
Specification |
---|
Clipboard API and events # clipboard-event-copy |
HTML Standard # handler-oncopy |
Browser compatibility
BCD tables only load in the browser