Execute a script when the content of the element is being cut in HTML?

HTML Web Development Front End Technology

Oncut attribute triggers when the user cuts the content of an element. Although all HTML elements supported the oncut attribute, cutting content was not allowed unless the element's contenteditable attribute was set to "true."

Following are the examples…

Example: Cutting some text in <input> using <oncut>

In the following example we are excuting a javascript for cutting some text in an <input> element using the oncut attribute.


<!DOCTYPE html>
<html>
<body>
   <input type="text" oncut="myworld()" value="WELCOME TO THE TUTORIALSPOINT">
   <p id="varma"></p>
   <script>
      function myworld() {
         document.getElementById("varma").innerHTML = "You cut text....!";
      }
   </script>
</body>
</html>

Output

When you try to execute the script,the window will pop up and display the text "welcome to the tutorialspoint" and when you try to cut the input content, it will display the text "you cut the text".

Example: Contenteditable is set to “true”

In the following example we are excuting javascript to cut some text in<p>element while,contenteditable set to “true”.


<!DOCTYPE html>
<html>
<body>
   <p contenteditable="true" oncut="myFunction()">WELCOME TO THE TUTORIALSPOINT</p>
   <script>
      function myFunction() {
         alert("You cut text!");
      }
   </script>
</body>
</html>

Output

When the script gets executed, the contenteditable is set to true to allow the oncut function and display text "welcome to the tutorialspoint" and when you try to cut the text, it will display an alert saying that "you cut the text".