Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM ClipboardEvent

  • Last Updated : 05 Feb, 2019

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Clipboard Events

  1. 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.




    <!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




    <!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




    <!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:

    Browser Support: The listed browsers support ClipboardEvent:

    • Google Chrome
    • Firefox
    • Internet Explorer
    • Opera
    • Safari



    My Personal Notes arrow_drop_up
Recommended Articles
Page :