EN
JavaScript - oncopy event example
0
points
In this article, we would like to show you oncopy event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#my-element');
myElement.addEventListener('copy', function() {
console.log('oncopy event occurred.');
});
or:
<input type="text" oncopy="handleCopy()" value="Example text to copy.">
or:
var myElement = document.querySelector('#my-element');
myElement.oncopy = function() {
console.log('oncopy event occurred.');
};
Practical examples
There are three common ways how to use oncopy event:
- with event listener,
- with element attribute,
- with element property.
In this example, we will execute handleCopy() when a user copies some text from the input (oncopy event).
1. Event listener based example
In this section, we want to show how to use oncopy event on input element via event listener mechanism.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<input type="text" id="my-input" value="Copy this text.">
<script>
var myInput = document.querySelector('#my-input');
myInput.addEventListener('copy', function() {
console.log('oncopy event occurred.');
});
</script>
</body>
</html>
2. Attribute based example
In this section, we want to show how to use oncopy event on input element via attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<input type="text" oncopy="handleCopy()" value="Copy this text.">
<script>
function handleCopy(){
console.log('oncopy event occurred.');
}
</script>
</body>
</html>
3. Property based example
In this section, we want to show how to use oncopy event on input element via property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<input type="text" id="my-input" value="Copy this text.">
<script>
var myInput = document.querySelector('#my-input');
myInput.oncopy = function() {
console.log('oncopy event occurred.');
};
</script>
</body>
</html>