HTML oncopy Event Attribute - 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

List of Clipboard Events Attribute	Clipboard Events Attribute
HTML oncopy Event Attribute	Clipboard Events Attribute
HTML oncut Event Attribute	Clipboard Events Attribute
HTML onpaste Event Attribute	Clipboard Events Attribute

Single Articles

Example of HTML oncopy Event Attribute	Clipboard Events Attribute
Definition and Usage of HTML oncopy Event Attribute	Clipboard Events Attribute
Browser Support of HTML oncopy Event Attribute	Clipboard Events Attribute
Syntax of HTML oncopy Event Attribute	Clipboard Events Attribute
Attribute Values of HTML oncopy Event Attribute	Clipboard Events Attribute
Technical Details of HTML oncopy Event Attribute	Clipboard Events Attribute
How to Execute a JavaScript when copying some text of an <input> element	Clipboard Events Attribute
How to Execute a JavaScript when copying some text of a <p> element	Clipboard Events Attribute
How to Execute a JavaScript when copying an image	Clipboard Events Attribute

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

Reffered: https://www.w3schools.com/tags/ev_oncopy.asp