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
Execute a script when the content of the element is being copied in HTML?
The oncopy event in HTML fires when a user copies content from an element. This event is triggered when users copy text from input fields, paragraphs, divs, or even when they copy images. The oncopy event is commonly used with text input elements to detect and respond to copy operations.
Syntax
The oncopy event can be used in two ways −
Using the inline event handler −
<element oncopy="myFunction()">Content</element>
Using the addEventListener() method −
element.addEventListener("copy", function);
Using Inline Event Handler
The oncopy attribute allows you to execute JavaScript code directly when the copy event occurs. This approach is simple and works well for basic copy detection scenarios.
Example
Following example demonstrates running JavaScript when copying text from an input element −
<!DOCTYPE html>
<html>
<head>
<title>OnCopy Event Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Copy the text below:</h2>
<input type="text" oncopy="myFunction()" value="Welcome to TutorialsPoint" style="width: 300px; padding: 8px; font-size: 16px;">
<p id="message" style="color: green; font-weight: bold;"></p>
<script>
function myFunction() {
document.getElementById("message").innerHTML = "Text has been copied!";
}
</script>
</body>
</html>
When you select and copy the text from the input field (Ctrl+C or right-click copy), the message "Text has been copied!" appears below −
Copy the text below: [Welcome to TutorialsPoint] (input field) Text has been copied! (appears after copying)
Using addEventListener() Method
The addEventListener() method provides a more flexible approach to handle copy events. This method allows you to attach multiple event listeners and provides better separation of HTML and JavaScript code.
Example
Following example uses addEventListener() to detect when text is copied −
<!DOCTYPE html>
<html>
<head>
<title>Copy Event with addEventListener</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Try copying this text:</h2>
<input type="text" id="textInput" value="The Best E-Learning Platform" style="width: 300px; padding: 8px; font-size: 16px;">
<script>
document.getElementById("textInput").addEventListener("copy", function() {
alert("Text has been copied!");
});
</script>
</body>
</html>
When the text is copied from the input field, an alert dialog appears with the message "Text has been copied!" −
Try copying this text: [The Best E-Learning Platform] (input field) (Alert popup appears when text is copied)
Copy Event on Different Elements
The oncopy event works on various HTML elements including paragraphs, divs, and text areas. Here's how it works with different elements.
Example − Copy Event on Paragraph
<!DOCTYPE html>
<html>
<head>
<title>Copy Event on Paragraph</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select and copy the paragraph below:</h2>
<p id="copyText" oncopy="showCopyMessage()" style="background-color: #f0f0f0; padding: 15px; border: 1px solid #ccc; cursor: text;">
This is a sample paragraph. Select this text and copy it to trigger the oncopy event.
You can copy any portion of this text to see the event in action.
</p>
<div id="status" style="margin-top: 10px; color: blue; font-weight: bold;"></div>
<script>
function showCopyMessage() {
document.getElementById("status").innerHTML = "Content copied from paragraph!";
setTimeout(function() {
document.getElementById("status").innerHTML = "";
}, 3000);
}
</script>
</body>
</html>
When any text from the paragraph is copied, the status message appears and disappears after 3 seconds.
Copy Event with Textarea
Example
<!DOCTYPE html>
<html>
<head>
<title>Copy Event on Textarea</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Copy text from the textarea:</h2>
<textarea id="myTextarea" rows="4" cols="50" style="padding: 8px; font-size: 14px;">
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
</textarea>
<br><br>
<p id="copyCount" style="color: red; font-weight: bold;">Copy count: 0</p>
<script>
let count = 0;
document.getElementById("myTextarea").addEventListener("copy", function() {
count++;
document.getElementById("copyCount").innerHTML = "Copy count: " + count;
});
</script>
</body>
</html>
Each time text is copied from the textarea, the copy counter increments, showing how many times the copy operation has been performed.
Event Object Properties
The copy event provides access to the event object, which contains useful information about the copy operation. You can access the event object by passing it as a parameter to your event handler function.
Example − Using Event Object
<!DOCTYPE html>
<html>
<head>
<title>Copy Event Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Copy Event Information</h2>
<p id="sampleText" style="background: #f9f9f9; padding: 15px; border: 1px solid #ddd;">
Select and copy this text to see event details. The copy event provides information
about the element that triggered the event.
</p>
<div id="eventInfo" style="margin-top: 15px; padding: 10px; background: #fff; border: 1px solid #ccc;"></div>
<script>
document.getElementById("sampleText").addEventListener("copy", function(event) {
const info = `
<strong>Copy Event Details:</strong><br>
Event Type: ${event.type}<br>
Target Element: ${event.target.tagName}<br>
Target ID: ${event.target.id}<br>
Timestamp: ${new Date().toLocaleTimeString()}
`;
document.getElementById("eventInfo").innerHTML = info;
});
</script>
</body>
</html>
This example displays detailed information about the copy event including the event type, target element, and timestamp when the copy operation occurred.
Conclusion
The oncopy event is a useful tool for detecting when users copy content from HTML elements. It can be implemented using either inline event handlers or the addEventListener() method, and works with various elements including input fields, paragraphs, and textareas. This event is commonly used for tracking user interactions, providing feedback, or implementing custom copy behaviors in web applications.
186 Views
