Screenshot
– “Copy to Clipboard” is useful animation for every website related to coding. We think every developer needs to know how it works. Because the developer needs to implement this kind of functionality in the website.We found many articles which provide solution to copy to clip board, but we were not satisfied with them as the codes were lengthy and wrote useless JavaScript. But in the end we have created a “copy to clipboard” animation using just five lines of JavaScript code. Here the overall code is long due to css otherwise the javascript code is very short.
So let’s know about this animation how it will work. First you’ll find a textarea, it will also have a copy button. As soon as you click the button, the textarea content will be copied and the button’s “copied” will be written for 3 seconds.
If you want to learn animation using javascript and js plugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.
1. HTML Struktur
<!DOCTYPE html>
<html>
<head>
<title>Copy To Clipboard JavaScript | laborblog.my.id</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
main content...
</body>
</html>
2. HTML
<!DOCTYPE html>
<html>
<head>
<title>Copy To Clipboard JavaScript | laborblog.my.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<textarea placeholder="Message" cols="30" rows="10" class="copy-text"></textarea>
<button class="copy-btn">Copy</button>
</div>
<script src="script.js"></script>
</body>
</html>
3. CSS
{
margin: 0px;
padding: 0px;
font-family: "Poppins", sans-serif;
background: #F7EDE2;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.container{
background: white;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 6px;
}
.copy-text{
border: 2px solid #111;
padding: 16px 20px;
font-size: 16px;
font-weight: 600;
height: 350px;
width: 800px;
margin-bottom: 20px;
font-family: inherit;
border-radius: 2px;
}
.copy-btn{
padding: 12px 32px;
border: 0px;
background: #3F88C5;
color: white;
width: 120px;
font-size: 16px;
font-family: inherit;
cursor: pointer;
font-weight: 600;
}
.copied{
background: #04AA6D;
transition: 0.5s;
}
4. Javascript
const btn = document.querySelector(".copy-btn");
const text = document.querySelector(".copy-text");
btn.addEventListener("click", () =>{
text.select();
text.setSelectionRange(0, 10000);
document.execCommand("copy");
btn.classList.toggle("copied");
btn.innerHTML = "Copied!";
setTimeout(function(){
btn.classList.toggle("copied");
btn.innerHTML = "Copy";
}, 3000);
});
