The copyer.js is an open-source library that builds in Javascript. This plugin allows site users to copy the text to the clipboard without the input field.
While implementation, you don’t need to define the Textarea or any kind of input filed. You can implement it using HTML elements such as div or p tags.
It is a vanilla Javascript library that has the ability to copy the text within the container to the clipboard using the document.execCommand API.
How to use Copy to Clipboard Using Javascript
It’s quite easy to use on your website and you need to import the Javascript file copyer.js into the document.
<script src="js/copyer.js"></script>
Next, You need to call the copyer() function and specify the selector ID which holds the text you want to copy. In our case, you can see we are using the P HTML tag and using the ID hm.
<p id="hm">Hello Man! This is Clipboard Demo</p> <button onClick="copym()">Copy Above Text</button>
If you want to implement copy clip-on text filed, you can also do it by defining the text filed and add the ID. Next, simply call the copier function.
<input id="ib" type="text" placeholder="type something"> <button onClick="copyib()"> Copy Text From Box </button>
Finally, You need to initialize the Javascript function if you want to show an alert box.
<script>
function copym(){
copyer("hm");
alert("Copied : '" + document.getElementById("hm").innerHTML + "' to clipboard");
}
function copyib(){
copyer("ib")
alert("Copied : '" + document.getElementById("ib").value + "' to clipboard");
}
</script>That’s It.