JavaScript Element copy Event

What You’ll Learn

The copy event fires when the user starts a copy action in the browser UI. Learn ClipboardEvent.clipboardData, setData, preventDefault to customize clipboard text, addEventListener vs oncopy, and five try-it labs.

Introduction

When someone selects text and presses Ctrl+C (or Cmd+C on macOS), or chooses Copy from a menu, the browser fires copy. By default it puts the selection on the system clipboard.

Your handler can change what gets copied: write a custom string with event.clipboardData.setData("text/plain", ...) and call preventDefault() so the default selection copy does not overwrite it.

Understanding copy

An instance event that answers: “Did the user just start a copy action from the browser UI?”

• Default — copy the current selection (if any) to the clipboard.
• ClipboardEvent — use clipboardData.setData(format, data).
• Cancelable — preventDefault() after setting your own data.
• Bubbles & composed — can reach Document and Window.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

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

oncopy = (event) => { };

Event type

A ClipboardEvent (inherits from Event).

Key property

🔒 What You Can and Cannot Do

• Can replace copied text with setData + preventDefault().
• Cannot read clipboard contents inside a copy handler.
• Cannot change the system clipboard by only dispatching a fake copy event.
• Siblings — cut and paste for the rest of the clipboard story.

⚖️ copy Event vs navigator.clipboard

Examples Gallery

Examples follow MDN Element: copy event. Select text, copy with Ctrl+C / Cmd+C, then paste to see the result.

const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});

HELLO WORLD

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

field.oncopy = (event) => {
  const text = document.getSelection().toString().trim();
  event.clipboardData.setData("text/plain", text);
  event.preventDefault();
};

Trimmed text lands on the clipboard

const article = document.getElementById("article");
const out = document.getElementById("out");

article.addEventListener("copy", () => {
  const len = document.getSelection().toString().length;
  out.textContent = "Copied " + len + " character(s)";
});

Copied 12 character(s)

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

article.addEventListener("copy", (event) => {
  const selected = document.getSelection().toString();
  const payload = selected + "\n\n— Source: CodeToFun tutorial";
  event.clipboardData.setData("text/plain", payload);
  event.preventDefault();
});

Selected sentence here

— Source: CodeToFun tutorial

const secret = document.getElementById("secret");
const out = document.getElementById("out");

secret.addEventListener("copy", (event) => {
  event.preventDefault();
  out.textContent = "Copy disabled in this demo field.";
});

Copy disabled in this demo field.

🚀 Common Use Cases

• Normalizing copied text (uppercase, trim, strip markdown).
• Appending a citation or source URL to copied article text.
• Copying a cleaned plain-text version of rich HTML selections.
• Logging analytics when users copy content.
• Softly discouraging copy on a demo field (with clear UX—not DRM).

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Copy handlers write; they do not read clipboard data.
• Synthetic copy events do not update the system clipboard by themselves.
• Related learning: contextmenu, cut, addEventListener(), JavaScript hub.

💡 Best Practices