Skip to content
Related Articles

Related Articles

HTML | DOM ClipboardEvent

Improve Article
Save Article
  • Last Updated : 24 Aug, 2022
Improve Article
Save Article

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>

Output:

  • Before performing paste operation: 
  • After performing paste operation: 

Supported Browsers: The listed browsers support ClipboardEvent:

  • Google Chrome 41
  • Edge 12
  • Firefox 22
  • Opera 28
  • Safari 10.1

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!