/Web APIs

HTMLElement: copy event

The copy event fires when the user initiates a copy action through the browser's user interface.


Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("copy", (event) => {});

oncopy = (event) => {};

Event type

Event properties

Also inherits properties from its parent Event.

ClipboardEvent.clipboardData Read only

A DataTransfer object containing the data affected by the user-initiated cut, copy, or paste operation, along with its MIME type.


This example blocks every copy and paste attempt from the <textarea>.


<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">
Try copying and pasting text into this field!

<p id="log"></p>


const log = document.getElementById("log");

function logCopy(event) {
  log.innerText = `Copy blocked!\n${log.innerText}`;

function logPaste(event) {
  log.innerText = `Paste blocked!\n${log.innerText}`;

const editor = document.getElementById("editor");

editor.oncopy = logCopy;
editor.onpaste = logPaste;



Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
copy_event 1 12 22
9Before Internet Explorer 9, this event is not supported via addEventListener; however, the event handler is supported since IE 5.5. The event can be listened to via element.oncopy.
≤12.1 3 4.4 18 22 ≤12.1 3 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.