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 oncopy Event Attribute
The HTML oncopy attribute is an event handler that triggers when a user copies the content of an HTML element. This attribute can be applied to any HTML element to execute JavaScript code whenever the copy action occurs, whether through keyboard shortcuts (Ctrl+C), right-click context menu, or browser menu options.
Syntax
Following is the syntax for the oncopy attribute −
<tagname oncopy="script">Content</tagname>
Where script is the JavaScript code to execute when the copy event is triggered.
Parameters
The oncopy attribute accepts a single parameter −
script − JavaScript code or function name to execute when the copy event occurs. This can be inline JavaScript or a function call.
How It Works
The oncopy event is part of the clipboard events in HTML5. When a user attempts to copy content from an element that has the oncopy attribute, the specified JavaScript function executes before the actual copy operation completes. This allows developers to track copy actions, modify the copied content, or provide visual feedback.
Basic Example
Following example demonstrates a simple usage of the oncopy attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML oncopy Event Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>oncopy Event Demo</h1>
<p oncopy="showAlert()">Select and copy this text to see the oncopy event in action.</p>
<p>Instructions: Select the above text and press Ctrl+C (or Cmd+C on Mac).</p>
<script>
function showAlert() {
alert("Text has been copied!");
}
</script>
</body>
</html>
When you copy the paragraph text, an alert message appears indicating the copy action was detected.
Advanced Example with Visual Feedback
Following example shows how to provide visual feedback when content is copied −
<!DOCTYPE html>
<html>
<head>
<title>oncopy with Visual Feedback</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>HTML oncopy Event with Visual Feedback</h1>
<p id="copyText" oncopy="changeBackground()">
Copy this paragraph to see the background color change.
</p>
<p style="color: #666;">Try copying the above text using Ctrl+C or right-click menu.</p>
<div id="message" style="margin-top: 20px; padding: 10px; display: none; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 4px;">
Content copied successfully!
</div>
<script>
function changeBackground() {
document.body.style.backgroundColor = "#f0f8ff";
document.getElementById("message").style.display = "block";
setTimeout(function() {
document.body.style.backgroundColor = "";
document.getElementById("message").style.display = "none";
}, 3000);
}
</script>
</body>
</html>
This example changes the background color temporarily and shows a success message when text is copied.
Copy Counter Example
Following example tracks how many times content has been copied −
<!DOCTYPE html>
<html>
<head>
<title>Copy Counter with oncopy</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Copy Counter Demo</h1>
<p oncopy="incrementCounter()">
This is some sample text. Each time you copy this text, the counter below will increase.
</p>
<p><strong>Copy Count: <span id="counter">0</span></strong></p>
<button onclick="resetCounter()">Reset Counter</button>
<script>
var copyCount = 0;
function incrementCounter() {
copyCount++;
document.getElementById("counter").textContent = copyCount;
}
function resetCounter() {
copyCount = 0;
document.getElementById("counter").textContent = copyCount;
}
</script>
</body>
</html>
Each time the paragraph text is copied, the counter increments, demonstrating how the oncopy event can be used for tracking user interactions.
Browser Compatibility
The oncopy event attribute is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It works consistently across different platforms and devices.
Common Use Cases
The oncopy attribute is commonly used for −
Analytics tracking − Monitor how often users copy content from your website.
Copyright protection − Display warnings or track unauthorized copying of content.
User experience enhancement − Provide visual feedback when users copy important information.
Form validation − Track when users copy form data or sensitive information.
Conclusion
The HTML oncopy attribute provides a simple way to execute JavaScript when users copy content from HTML elements. It enables developers to track copy actions, provide user feedback, and enhance the overall user experience by responding to clipboard events in real-time.
201 Views
