Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Clipboard event
The HTML DOM Clipboard event is triggered when the user performs clipboard operations such as cut, copy, or paste on web page content. These events provide information about clipboard modifications and allow developers to create more interactive and accessible web applications by responding to user clipboard actions.
Syntax
Following is the syntax for creating a Clipboard event −
var clipboardEvent = new ClipboardEvent(type, [options]);
Where type can be 'cut', 'copy', or 'paste', and the optional options parameter contains properties like clipboardData, dataType, and data.
Properties
Following is the main property for Clipboard event −
| Property | Description |
|---|---|
| clipboardData | Returns a DataTransfer object containing the data affected by the clipboard operation (cut, copy, or paste). |
Events
Following are the event types belonging to the Clipboard event −
| Event | Description |
|---|---|
| oncopy | Fires when the content of an element is copied by the user (Ctrl+C or right-click copy). |
| oncut | Fires when the user cuts the content of an element (Ctrl+X or right-click cut). |
| onpaste | Fires when the user pastes content into an element (Ctrl+V or right-click paste). |
Using the oncopy Event
Example
Following example demonstrates the oncopy event that triggers when text is copied from an input field −
<!DOCTYPE html>
<html>
<head>
<title>Clipboard oncopy Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Copy Text Example</h2>
<form>
<label>TEXTBOX:
<input type="text" oncopy="copyText()" value="Copy this text" style="padding: 5px; margin: 10px;">
</label>
</form>
<p id="message" style="color: green; font-weight: bold;"></p>
<script>
function copyText() {
document.getElementById("message").innerHTML = "The text has been copied by you!";
}
</script>
</body>
</html>
When the user selects and copies the text from the input field (using Ctrl+C or right-click copy), the message "The text has been copied by you!" appears below the textbox.
TEXTBOX: [Copy this text] The text has been copied by you!
Using the oncut Event
Example
Following example shows the oncut event in action −
<!DOCTYPE html>
<html>
<head>
<title>Clipboard oncut Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cut Text Example</h2>
<textarea oncut="cutText()" style="width: 300px; height: 60px; padding: 5px;">Select and cut this text</textarea>
<p id="cutMessage" style="color: orange; font-weight: bold;"></p>
<script>
function cutText() {
document.getElementById("cutMessage").innerHTML = "Text has been cut to clipboard!";
}
</script>
</body>
</html>
When the user cuts text from the textarea (using Ctrl+X), the confirmation message appears and the text is removed from the textarea.
[Select and cut this text] Text has been cut to clipboard!
Using the onpaste Event
Example
Following example demonstrates the onpaste event that triggers when content is pasted −
<!DOCTYPE html>
<html>
<head>
<title>Clipboard onpaste Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Paste Text Example</h2>
<input type="text" onpaste="pasteText()" placeholder="Paste text here" style="padding: 8px; width: 250px;">
<p id="pasteMessage" style="color: blue; font-weight: bold;"></p>
<script>
function pasteText() {
document.getElementById("pasteMessage").innerHTML = "Content has been pasted!";
}
</script>
</body>
</html>
When the user pastes content into the input field (using Ctrl+V), the message "Content has been pasted!" appears below the input field.
[Paste text here] Content has been pasted!
Accessing Clipboard Data
The clipboardData property provides access to the actual data being transferred. Following example shows how to access clipboard data during a paste operation −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Clipboard Data</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Clipboard Data Access</h2>
<textarea onpaste="showPasteData(event)" placeholder="Paste something here" style="width: 300px; height: 80px; padding: 5px;"></textarea>
<p id="dataInfo" style="background: #f0f0f0; padding: 10px; margin-top: 10px;"></p>
<script>
function showPasteData(event) {
var clipboardData = event.clipboardData || window.clipboardData;
var pastedData = clipboardData.getData('text');
document.getElementById("dataInfo").innerHTML = "Pasted data: " + pastedData;
}
</script>
</body>
</html>
This example captures and displays the actual text content being pasted into the textarea.
[Paste something here] Pasted data: Hello World
Common Use Cases
Clipboard events are commonly used for −
-
Security monitoring − Tracking when sensitive data is copied from forms or documents.
-
User feedback − Providing confirmation messages when clipboard operations occur.
-
Data validation − Checking pasted content before allowing it into input fields.
-
Analytics − Tracking user interaction patterns with copy-paste functionality.
Conclusion
HTML DOM Clipboard events provide a powerful way to monitor and respond to user clipboard operations. The oncopy, oncut, and onpaste events enable developers to create more interactive applications while the clipboardData property allows access to the actual transferred content for validation and processing.
480 Views
