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:
<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>