How To Use Oncut Event In JavaScript With Example

Posted By Bajarangi soft , Posted On 29-09-2020

In Java Script we can get alert message when we copied text so today we are going to discuss how to get message or alert message when we copied text using java script.

How To Use Oncut Event In JavaScript With Example

The oncut event occurs when the user cuts the content of an element.

Note: Although the oncut event is supported by all HTML elements, it is not actually possible to cut the content of, for example, a <p> element, UNLESS the element has set contenteditable to "true" (See "More Examples" below).

The oncut event is mostly used on <input> elements with type="text".

There are three ways to cut the content of an element:

Press CTRL + X
Select "Cut" from the Edit menu in your browser
Right click to display the context menu and select the "Cut" command.

Example(1)

<div class="col-md-6">
    <input class="form-control" type="text" oncut="cut_text()" value="Try to cut this text">
</div>
<script>
    function cut_text() {
        document.getElementById("demo").innerHTML = "You cut text!";
    }
</script>

In above example when cutting some text in an <input> element you get message to specified id.

Example(2)

<div class="col-md-6">
    <input class="form-control" type="text" oncut="get_alert()" value="Try to cut this text">
</div>
<script>
    function get_alert() {
        alert("You cut text!");
    }
</script>

In above this above example demonstrates how to assign an "oncut" event to an input element.

Example(3)

<div class="col-md-6">
    <input id="Input" class="form-control" type="text" oncut="get_alert()" value="Try to cut this text">
</div>
<script>
    document.getElementById("Input").oncut = function() {get_alert()};

    function get_alert() {
        alert("You cut text!");
    }
</script>

In above this above example uses the HTML DOM to assign an "oncut" event to an input element.

Example(4)

<div class="col-md-6">
    <input id="Input" class="form-control" type="text" oncut="get_alert()" value="Try to cut this text">
</div>
<script>
    document.getElementById("Input").addEventListener("cut", get_alert);

    function get_alert() {
        alert("You cut text!");
    }
</script>

In above this above example uses the addEventListener() method to attach a "cut" event to an input element.

Complete Code for Oncut Event In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Use Oncut Event In JavaScript With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1{
        color: red;
    }
</style>
<body>
<div class="container">
    <br>
       <div class="text-center">
        <h1>Use Oncut Event In JavaScript With Example </h1>
    </div>
    <br>
    <div class="well">
        <div class="col-md-6">
            <input class="form-control" type="text" oncut="cut_text()" value="Try to copy this text"></div>
        <div class="col-md-6">
            <input class="form-control" type="text" oncut="get_alert()" value="Try to cut this text">
        </div>
        <h2 id="demo"></h2>
    </div>
</body>
</html>
<script>
    function cut_text() {
        document.getElementById("demo").innerHTML = "You cut text!";
    }
    function get_alert() {
        alert("You cut text!");
    }
</script>

Related Post