onCut, onCopy and onPaste Events tutorial in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>onCut onCopy onPaste Events JavaScript</title>
<link rel="stylesheet" href="css/onCut_onCopy_onPaste_Events_JavaScript.css">
</head>
<body>
<h2>JavaScript Clipboard Events</h2>
<input type="text" id="myinput">
<div id="box" oncopy="copyfunction()">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore, quia ea
unde, ratione eum hic
error accusamus ipsa illum corporis iste mollitia natus consequuntur dolore, dolorem praesentium commodi
debitis. Quos doloribus itaque amet omnis ab similique sunt voluptatem deleniti officiis vitae vel, corporis
alias beatae libero mollitia inventore iure. Sequi vel facere ea molestias, quo dicta libero accusantium neque
nisi, rerum esse ipsum, optio odio maxime quis nemo ratione. Odit.</div>
<script>
var target = document.querySelector("#myinput");
target.addEventListener("copy", function () {
console.clear();
console.log("You Copied Text.");
target.style.backgroundColor = "#90ee90";
});
target.addEventListener("cut", function () {
console.clear();
console.log("You Cut Text.");
target.style.backgroundColor = "#ffc0cb";
});
target.addEventListener("paste", function () {
console.clear();
console.log("You Pasted Text.");
target.style.backgroundColor = "#add8e6";
});
var targetTwo = document.querySelector("#box");
targetTwo.addEventListener("copy", function () {
console.clear();
console.log("You Copied Text of Paragraph.");
targetTwo.style.backgroundColor = "#90ee90";
});
//Below is Old way for making function
function copyfunction() {
console.clear();
console.log("You Copied Text of Paragraph.");
targetTwo.style.backgroundColor = "#90ee90";
}
targetTwo.addEventListener("cut", function () {
console.clear();
console.log("You Cut Text of Paragraph.");
targetTwo.style.backgroundColor = "#ffc0cb";
});
targetTwo.addEventListener("paste", function () {
console.clear();
console.log("You Pasted Text of Paragraph.");
targetTwo.style.backgroundColor = "#add8e6";
});
</script>
</body>
</html>
Below File is css/onCut_onCopy_onPaste_Events_JavaScript.css File
body {
font-family: arial;
}
#myinput {
font-size: 21px;
padding: 15px;
width: 70%;
}
#box {
background: #fafad2;
width: 400px;
height: 250px;
padding: 15px;
border: 1px solid #000000;
}.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment