oncopy Event

DOM Events ClipboardEvent

Definition and Usage

The oncopy event occurs when the user copies the content of the element.

Tip:The oncopy event also occurs when the user copies elements created with the <img> element (such as images).

Tip: The oncopy event is mainly used for <input> elements with type="text".

Tip:Here are three ways to copy elements/element content:

  • CTRL + C
  • Select copy from the browser's edit menu
  • Right-click the menu and select the copy command

Example

Example 1

Execute JavaScript when copying the text of the <input> element:

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

Try It Yourself

Example 2

Execute JavaScript when copying some text of the <p> element:

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

Try It Yourself

Example 3

Execute JavaScript when copying an image:

<img src="codew3c.gif" oncopy="myFunction()">

Try It Yourself

Syntax

In HTML:

<element oncopy="myScript">

Try It Yourself

In JavaScript:

object.oncopy = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("copy", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical Details

Bubbling: Support
Cancelable: Support
Event types: ClipboardEvent
Supported HTML tags: All HTML elements

Browser Support

Event Chrome IE Firefox Safari Opera
oncopy Support Support Support Support Support

Note:When trying to copy an image, the oncopy event may not work as expected in some browsers (see more examples below).

Related Pages

HTML DOM Reference Manual:onpaste Event

HTML DOM Reference Manual:oncut Event

DOM Events ClipboardEvent