HTML | DOM ClipboardEvent

Last Updated : 26 Nov, 2024

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.

1. oncopy:

It is used to copy the content of an element.

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

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>

2. oncut:

It is used to cut the content of an element.

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

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>

3. onpaste:

It is used to paste content in an element.

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

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>

R

riarawal99

Improve

Article Tags :

Similar Reads

HTML | DOM Style columnRuleWidth Property

The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns. Syntax: It returns the columnRuleWidth property.object.style.columnRuleWidthIt is used to set columnRuleWidth property.object.style.columnRuleWidth = "medium|thin|thick|length| in

HTML DOM adoptNode() Method

This DOM adoptNode() method is used to adopt a node from another document. All node types can be adopted. All child nodes along with the original node can be adopted. AdoptNode() method is used to return node objects.Syntax: document.adoptNode(node)Parameter Value: DOM adoptNode() method contains on

HTML | DOM Style zIndex Property

The Style zIndex property is used for set or return the stack order of a positioned element. The element which has a lower stack order will be behind of another element with higher stack order. For example, the element with stack order(1) will be in front of the element with stack order(0). The Styl

HTML | DOM Input Password Object

The Input Password Object in HTML DOM is used to represent an HTML input element with type="password". The input element with type="password" can be accessed by using getElementById() method. Syntax: It is used to access input type="password"document.getElementById("id");It is used to create type="p

HTML | DOM Column Object

The Column Object in HTML DOM is used to represent the HTML <col> element. This tag is used to set or get the properties of <col> element. It can be accessed by using getElementById() method.Syntax: document.getElementById("Col_ID"); This Col_ID is assigned to HTML < col > element.

HTML | DOM Input Hidden Object

The Input Hidden object in HTML DOM represents the <input> element with type = â€œhiddenâ€ attribute. The element can be accessed by using getElementById() method.Syntax: document.getElementById("id"); where id is assigned to the <input> tag.Property Values: defaultvalue: It is used to set

HTML | DOM Input Time Object

The Input Time object in HTML DOM represents an <input> element with type = "time" attribute. The time attribute can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the referen

HTML DOM Geolocation coordinates Property

The DOM Geolocation coordinates Property in HTML is used to return the position and altitude of the device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. Property Values: ValuesDescriptioncoordinates.latitude

HTML DOM Textarea disabled Property

The DOM Textarea disabled Property is used to set or return whether the textarea element would be disabled or not. A disabled text area is un-clickable and unusable. It is a boolean attribute and is used to reflect the HTML Disabled attribute. Syntax: It is used to return the disabled property.texta

HTML | DOM Input Week Object

The Input Week object in HTML DOM represents an <input> element with type = "week" attribute. The element can be accessed by using getElementById() method. Syntax: document.getElementById("id"); where id is assigned to the <input> tag. Property Values: list: It returns the reference of d