Hi, friends in this article we are going to explain how to create copy to Clipboard using JavaScript help of clicking a single button. If you surf the internet, then it can be seen that there is a button that gets the data copied when single-clicked without the use of CTRL+C OR right click on the mouse. If you are a web developer, then you know that we do all these functions with the help of Javascript so that the user does not have any problems. And if they do not know how to make them all. So this article is important to you. So let’s start with the help of javascript.
Getting Bootsrap
Bootstrap can be Download to your needs from their Getting Started page but i would prefer using the CDN option, because it is faster also it is advised to go through and get yourself accustomed with some bootstrap terms, including common classes. This page also some Examples of how to use Bootstrap classes.
Creating Interface
In this part, we will create the interface so that the user can copy given data with the help of a button.
<!DOCTYPE html> <html> <head> <title>How to Create Copy to Clipboard using Javascript</title> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/snackbar.css"/> </head> <body> <div class="col-md-3"></div> <div class="col-md-6 well" style="margin:100px;"> <div class="col-md-6"> <pre style="white-space:normal;" id="copy"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum </pre> <button class="btn-success" id="js-emailcopybtn" onclick="Copy()">Copy to clipboard</button> </div> <div class="col-md-6"> <textarea style="resize:none; width:100%; height:205px;" placeholder="CTRL+V To Paste The Copied Text"></textarea> </div> <div id="snackbar"></div> </div> </body> <script src="js/script.js"></script> </html>
Create Function in Javascript
in this section, we will create a function using JavaScript to copy the data with single click.
function Copy(){
var copyDoc = document.querySelector('#copy');
var range = document.createRange();
range.selectNode(copyDoc);
window.getSelection().addRange(range);
try
{
var successful = document.execCommand('copy');
var msg = "Copy to clipboard";
SnackBar(msg)
}
catch (err)
{
alert("Error: Copy!")
}
window.getSelection().removeAllRanges();
}
function SnackBar(msg) {
var toast = document.getElementById("snackbar");
toast.className = "show";
document.getElementById("snackbar").innerHTML = msg;
setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 3000);
}
Styling The Snackbar
in this section, we will be styling the snackbar using CSS. when clicking on a copy button then appear a success message in a popup that’s called snackbar.
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.