The HTML oncuechange attribute is an event handler that triggers a script to execute when a user cuts the content of an element.
Definition and Usage
➔ This is one of the clipboard event attributes, along with oncopy and onpaste.
➔ This cut can be done using a keyboard shortcut (e.g., Ctrl+X), the browser edit menu, or the context menu via right-click.
➔ If contenteditable is not set to true by default for an element, the contenteditable attribute must be set to "true" on the element for the cut event to be functional.
Syntax
//In HTML
<p contenteditable="true" oncut="myFunction()" id="pid">
//Using Event Handler
x.oncut = function () { myFunction() };
//Using addEventListener
x.addEventListener("cut", () => { myFunction(); });
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncut Attribute Example</title>
</head>
<body>
<h2>HTML oncut Attribute Example</h2>
<p contenteditable="true" oncut="myFunction()" id="pid">Try to cut this text.</p>
<script>
function myFunction() {
alert("Text cut is done.");
}
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncut Attribute Example</title>
</head>
<body>
<h2>HTML oncut Attribute Example</h2>
<p contenteditable="true" id="pid">Try to cut this text.</p>
<script>
let x = document.querySelector("#pid");
function myFunction() {
alert("Text cut is done.");
}
//Using Event Handler
x.oncut = function () { myFunction() };
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncut Attribute Example</title>
</head>
<body>
<h2>HTML oncut Attribute Example</h2>
<p contenteditable="true" id="pid">Try to cut this text.</p>
<script>
let x = document.querySelector("#pid");
function myFunction() {
alert("Text cut is done.");
}
//Using addEventListener
x.addEventListener("cut",()=>{myFunction();})
</script>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| oncut | All visible elements |