HTML oncopy Attribute

Introduction

The oncopy attribute is an inline event handler that runs JavaScript when the copy event fires. That happens when the user copies content — with Ctrl+C (Cmd+C on Mac), Edit → Copy, or the context menu Copy action. It is useful for showing feedback, logging analytics, or modifying clipboard data with event.clipboardData. The copy event bubbles, so you can listen on a parent container. For production sites, prefer addEventListener("copy", …) over inline handlers.

What You’ll Learn

Purpose of oncopy Attribute

The primary purpose of oncopy is to react when the user copies text or content from an element. Common uses include showing a “Copied!” message, tracking analytics, appending a source link to clipboard text, or validating that copied content is allowed to leave the page. Because the handler runs during the copy operation, you can influence what lands on the clipboard via event.clipboardData.

Do not confuse oncopy with oncontextmenu. Right-click opens the menu; copy fires when the user actually copies. Pair with oncut and onpaste for full clipboard event coverage. Avoid blocking copy without a good reason — users rely on copying for accessibility and productivity.

📝 Syntax

Set oncopy on an element with copyable content or assign element.oncopy:

<script>

  function handleCopy() {

    document.getElementById("status").textContent = "Content copied!";

  }

</script>



<div id="article" oncopy="handleCopy()">

  Select and copy this paragraph.

</div>

<p id="status"></p>

Syntax Rules

• Value is JavaScript code executed when the user copies from the element.
• Pass event when you need clipboardData or preventDefault().
• Works on elements with selectable text: div, p, textarea, input, etc.
• JavaScript: element.oncopy = function(e) { … }.
• Modern alternative: element.addEventListener("copy", handler).
• The copy event bubbles — you can delegate on a parent container.

💎 Values

The oncopy attribute accepts a string of JavaScript code:

• oncopy="handleCopy()" — Call a named function.
• oncopy="handleCopy(event)" — Pass the event for clipboard access.
• JavaScript: block.oncopy = (e) => { … } assigns the handler.

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

article.addEventListener("copy", (event) => {

  const selection = window.getSelection().toString();

  event.clipboardData.setData("text/plain", selection + "\n\nSource: example.com");

  event.preventDefault();

});

Applicable Elements

oncopy vs oncut vs onpaste

Examples Gallery

Inline oncopy feedback, addEventListener with clipboardData attribution, and comparing copy with cut events.

<div id="article" oncopy="handleCopy()">

  Copy this content

</div>



<script>

  function handleCopy() {

    document.getElementById("msg").textContent = "Text copied!";

  }

</script>

document.getElementById("article").addEventListener("copy", function (event) {

  const text = window.getSelection().toString();

  event.clipboardData.setData("text/plain", text + "\n\nSource: example.com");

  event.preventDefault();

});

field.addEventListener("copy", () => {

  log("copy — duplicated to clipboard");

});



field.addEventListener("cut", () => {

  log("cut — removed from field");

});

♿ Accessibility

• Do not block copy lightly — Users rely on copying for notes, translation, and assistive tools. Avoid preventDefault() unless you have a clear benefit.
• Provide feedback — A visible “Copied!” message helps all users, including those who may not notice clipboard changes.
• Attribution is fine — Appending a source URL is common; keep it short and do not remove the user’s selected text without consent.
• Avoid alert() on copy — Use inline status text or toast-style messages instead of modal alerts.
• Keyboard users — Copy via Ctrl+C / Cmd+C must still work when you customize clipboard data in the handler.

💡 Best Practices