Skip to content
Related Articles

Related Articles

HTML | DOM ClipboardEvent
  • Last Updated : 05 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

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

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :