Javascript Copy to Clipboard Without Input – Copyer.js

Category: Text & Input | February 17, 2019
Javascript Copy to Clipboard Without Input
Author: tsycode
Official Page: Go to Website
Last Update:January 6, 2020
License:MIT

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.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.