HTML DOM Clipboard event


The HTML DOM Clipboard event is used to provide information regarding modification of the clipboard. The events can be cut, copy and paste. The Clipboard event can be used to make your site more accessible i.e. giving user information on how the clipboard is being modified.

Properties

Following is the property for Clipboard event −

PropertyDescription
clipboardDataTo return an object containing the data affected by the clipboard operation(cut,copy or paste).

Events

Following are the event types belonging to the Clipboard event −

EventDescription
oncopyThis event fires when the content of an element is copied by the user.
OncutThis event fires when the user cuts the content of an element
onpasteThis event fires when the user pastes some content in an element

Syntax

Following is the syntax for clipboard event −

var clipboardEvent = new ClipboardEvent(type,[options]);

Here, type can be ‘cut’,’copy’ or ‘paste’ and the second parameter is optional. The second parameter contains clipboardData, dataType and data.

Example

Let us look at an example for one of the Clipboard events oncopy −

<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
   function CopyText() {
      document.getElementById("Sample").innerHTML = "The text has been copied by you!"
   }
</script>
</body>
</html>

Output

This will produce the following output −

On copying the text inside TEXTBOX −

In the above example −

We have created an <input> element with type text. It has a label TEXTBOX assigned to it and contains some text inside it already for user to select. On copying the text by the user the CopyText() method is executed.

<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">

The CopyText() method gets the <p> element using the getElementById() method on document and displays “The text has been copied by you!" inside the paragraph.

function CopyText() {
   document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}
raja
Published on 07-Aug-2019 13:38:41
Advertisements