HTML | DOM ClipboardEvent

Last Updated : 24 Aug, 2022

The ClipboardEvent refers to all the events which occur when the clipboard is modified. All the properties and methods are inherited from the ‘Event Object’. There are 3 main ClipboardEvents:

oncopy
oncut
onpaste

Return Value: It returns an object containing the data affected by the clipboard operation.

Clipboard Events

1. oncopy: It is used to copy the content of an element.

Syntax:

<input type=”text” oncopy=”function_name()” value=”copy_operation_content”>

Example-1: Showing oncopy event.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1><center>Geeks</center> </h1>
    <h2><center>DOM ClipboardEvent</center></h2>
    <h4>Copy the text from the box</h4>
    <input type="text" oncopy="clip()" value="GeeksforGeeks">
    <p id="gfg"></p>
    <script>
        function clip() {
            document.getElementById("gfg").innerHTML = 
              "Copy Operation is performed!"
        }
    </script>
</body>
</html>

Output:

Before performing copy operation:
After performing copy operation:

2. oncut: It is used to cut the content of an element.

Syntax:

<input type=”text” oncut=”function_name()” value=”cut_operation_content”>

Example-2: Showing oncut event

HTML

<!DOCTYPE html>
<html>
<body>
    <h1><center>Geeks</center> </h1>
    <h2><center>DOM ClipboardEvent</center></h2>
    <h4>Cut the text from the box</h4>
    <input type="text" oncut="clip()" value="GeeksforGeeks">
    <p id="gfg"></p>
    <script>
        function clip() {
            document.getElementById("gfg").innerHTML = 
              "Cut Operation is performed!"
        }
    </script>
</body>
</html>

Output:

Before performing cut operation:
After performing cut operation:

3. onpaste: It is used to paste content in an element.

Syntax:

<input type=”text” onpaste=”function_name()” value=”Paste_operation_content”>

Example-3: Showing onpaste event

HTML

<!DOCTYPE html>
<html>
<body>
    <h1><center>Geeks</center> </h1>
    <h2><center>DOM ClipboardEvent</center></h2>
    <h4>Paste the text in the box</h4>
    <input type="text" onpaste="clip()" value="">
    <p id="gfg"></p>
    <script>
        function clip() {
            document.getElementById("gfg").innerHTML = 
              "Paste Operation is performed!"
        }
    </script>
</body>
</html>