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 cut in HTML?
The oncut attribute triggers when the user cuts content from an element. While all HTML elements support the oncut attribute, cutting content is only possible when the element's contenteditable attribute is set to "true" or when dealing with form input elements like <input> and <textarea>.
The oncut event is part of the clipboard events family, along with oncopy and onpaste. It fires when the user performs a cut operation using Ctrl+X, right-click context menu, or programmatically through JavaScript.
Syntax
Following is the syntax for the oncut attribute −
<element oncut="function()">Content</element>
The function can be an inline JavaScript statement or a reference to a JavaScript function defined elsewhere in the document.
Using oncut with Input Elements
Input elements like <input> and <textarea> naturally support cut operations without needing the contenteditable attribute.
Example − Cutting Text in Input Field
Following example demonstrates executing a JavaScript function when text is cut from an <input> element −
<!DOCTYPE html>
<html>
<head>
<title>oncut with Input Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cut Text from Input Field</h2>
<input type="text" oncut="handleCut()" value="WELCOME TO TUTORIALSPOINT" style="width: 300px; padding: 8px;">
<p id="message"></p>
<script>
function handleCut() {
document.getElementById("message").innerHTML = "Text was cut from the input field!";
document.getElementById("message").style.color = "red";
}
</script>
</body>
</html>
The output displays an input field with sample text. When you select and cut text using Ctrl+X or right-click menu, the message appears −
Cut Text from Input Field [WELCOME TO TUTORIALSPOINT] (input field) Text was cut from the input field! (appears in red when text is cut)
Using oncut with Contenteditable Elements
For regular HTML elements like <p>, <div>, or <span>, the contenteditable="true" attribute must be set to allow cutting operations.
Example − Contenteditable Paragraph
Following example shows how to use the oncut attribute with a contenteditable paragraph −
<!DOCTYPE html>
<html>
<head>
<title>oncut with Contenteditable</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Edit and Cut Text Below</h2>
<p oncut="showAlert()" style="border: 2px dashed #ccc; padding: 15px; background-color: #f9f9f9;">
WELCOME TO TUTORIALSPOINT - You can edit and cut this text!
</p>
<p id="status">Select text above and cut it (Ctrl+X)</p>
<script>
function showAlert() {
alert("You cut text from the paragraph!");
document.getElementById("status").innerHTML = "Text cutting detected!";
document.getElementById("status").style.color = "green";
}
</script>
</body>
</html>
The paragraph is editable due to contenteditable="true". When text is cut from it, an alert appears and the status message updates −
Edit and Cut Text Below [WELCOME TO TUTORIALSPOINT - You can edit and cut this text!] (editable paragraph with dashed border) Select text above and cut it (Ctrl+X) (Alert popup: "You cut text from the paragraph!" when text is cut) (Status changes to: "Text cutting detected!" in green)
Advanced Example − Cut Event Information
The cut event provides access to the clipboard data through the event object, allowing you to capture what was cut or even modify the clipboard content.
Example − Accessing Cut Event Details
<!DOCTYPE html>
<html>
<head>
<title>Cut Event Details</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Advanced Cut Event Handling</h2>
<textarea oncut="logCutEvent(event)" style="width: 400px; height: 100px; padding: 10px;">
Select and cut this text to see event details.
You can cut multiple lines of text here.
</textarea>
<div id="log" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 5px;">
<strong>Cut Event Log:</strong>
<div id="logContent">No cut events yet.</div>
</div>
<script>
function logCutEvent(event) {
var cutText = window.getSelection().toString();
var timestamp = new Date().toLocaleTimeString();
var logContent = document.getElementById("logContent");
logContent.innerHTML = "Time: " + timestamp + "<br>" +
"Cut text: '" + cutText + "'<br>" +
"Text length: " + cutText.length + " characters";
}
</script>
</body>
</html>
This example logs detailed information about the cut operation, including the timestamp, cut text content, and character count.
Browser Compatibility and Use Cases
The oncut attribute is supported by all modern browsers and is commonly used in the following scenarios −
Content editors − Rich text editors and content management systems
Form validation − Tracking user interactions with form fields
User activity logging − Recording clipboard operations for analytics
Security monitoring − Detecting when sensitive information is being copied or cut
Key Points
The oncut event triggers when content is cut from an element using Ctrl+X, context menu, or programmatically.
Form elements like
<input>and<textarea>support cutting by default.Other HTML elements require
contenteditable="true"to enable cutting functionality.The event provides access to clipboard data and timing information for advanced use cases.
Conclusion
The oncut attribute is a powerful tool for detecting and responding to text cutting operations in HTML elements. It works seamlessly with form inputs and requires the contenteditable attribute for other elements. This event is essential for building interactive web applications that need to track user clipboard activities.
276 Views
