HTML oncopy Event Attribute - HTML Clipboard Events Attribute

The HTML oncopy event attribute triggers when a user copies the content of an HTML element or the element itself. This event is part of the HTML DOM (Document Object Model) events and allows for the execution of a script, typically JavaScript, when a copy operation occurs.

Example of HTML oncopy Event Attribute

It will Execute a JavaScript when copying some text of an <input> element.

index.html

Example: HTML

 <input type="text" oncopy="myFunction()" value="Try to copy this text">

Output should be:

Definition and Usage of HTML oncopy Event Attribute

The oncopy attribute fires when the user copies the content of an element.

Tip: The oncopy attribute also fires when the user copies an element, for example, an image, created with the <img> element.

Tip: The oncopy attribute is mostly used on <input> elements with type="text".

Tip: There are three ways to copy an element/the content of an element:

Press CTRL + C
Select "Copy" from the Edit menu in your browser
Right click to display the context menu and select the "Copy" command

Browser Support of HTML oncopy Event Attribute

Note: The oncopy attribute may not work as expected in some browsers when trying to copy an image (See "More Examples" below).

Syntax of HTML oncopy Event Attribute

<element oncopy="script">

Attribute Values of HTML oncopy Event Attribute

Value	Description
script	The script to be run on oncopy

Technical Details of HTML oncopy Event Attribute

Supported HTML tags:	ALL HTML elements

How to Execute a JavaScript when copying some text of an <input> element

Try to copy this text.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<input type="text" oncopy="myFunction()" value="Try to copy this text">

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "You copied text!"
}
</script>

</body>
</html>

Output should be:

How to Execute a JavaScript when copying some text of a <p> element

Try to copy this text.

index.html

Example: HTML

 <p oncopy="myFunction()">Try to copy this text</p>

Output should be:

How to Execute a JavaScript when copying an image

Try to copy the image below (Right click on the image and select "Copy Image").

Note: This example may not work as expected in some browsers.

index.html

Example: HTML

 <img src="https://horje.com/avatar.png" oncopy="myFunction()">

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Clipboard Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference