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:
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 Aug, 2022
Like Article
Save Article