Copy To Clipboard On Button Click Using JavaScript

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. Providing your users the ability to copy text to the clipboard can make your website much more convenient and valuable. Unfortunately Flash 10 broke most of the methods for doing so. Luckily a great library named nanoclipboard.js exists.

nanoclipboard.js is a lightweight and dependency-free JavaScript library which allows to copy any text to your local clipboard by one click. So now check out the live DEMO and garb the ready to use code from below and use it anywhere.

Features:

1.) No JQuery File Added.
2.) JavaScript Code/File Added.
3.) No CSS Added.
4.) Simple And Fast Loading Library.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

JavaScript File:

<script src="https://cdn.jsdelivr.net/nanoclipboard/1.0.0/nanoclipboard.min.js"></script>
<script src="https://raw.githubusercontent.com/bornbit/nanoclipboard/master/dist/nanoclipboard.min.js"></script>

Copy Fix Data::

<button id="btn" data-clipboard-text="http://www.cssscript.com" title="Copy Me!">Copy</button>

Copy Dynamic Data:

<script>var clipboard = new NanoClipboard("#btn");</script>
<input class="url" value="https://www.exeideas.com"></input>
<button id="btn" data-clipboard-selector=".url" title="Copy Me!">Copy</button>

CallBack Events:

<script>clipboard.onSuccess = function(text) {
alert("Copied: " + text)
this.unselect();
};
clipboard.onError = function(text) {
window.prompt("Ctrl+C: ", text);
// this.unselect();
};</script>

Customization:

1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…