How To Use Oncopy 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 Oncopy Event In JavaScript With Example

The oncopy event occurs when the user copies the content of an element.

Tip: The oncopy event also occurs when the user copies an element, for example, an image, created with the <img> element.

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

Tip: There are three ways to copy an element/the content of an element:

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

Example(1)
In HTML

      <div class="col-md-6">
            <input class="form-control" type="text" oncopy="copy_text()" value="Try to copy this text">
      </div>

<script>
    function copy_text() {
        alert("You right-clicked inside the div!");
    }
</script>

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

Example(2)
In JavaScript

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

    function copy_text() {
        alert("You copied text!");
    }
</script>

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

Example(3)
In JavaScript, using the addEventListener() method:

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

    function copy_text() {
        alert("You copied text!");
    }
</script>

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

Example(4)

<h1 oncopy="copy_text()">Try to copy this text</h1>

<script>
    function copy_text() {
        alert("You copied text!");
    }
</script>

Execute a JavaScript when copying some text of a <h1> element.

Complete code for Use Oncopy Event In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Use Oncopy 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 Oncopy Event In JavaScript With Example </h1>
    </div>
    <br>
    <div class="well">
        <div class="col-md-6">
            <input class="form-control" type="text" oncopy="copy_text()" value="Try to copy this text">
    </div>
        <br>
        <br>
</body>
</html>
<script>
    function copy_text() {
        alert("You right-clicked inside the div!");
    }
</script>

Related Post