Lightweight Copy To Clipboard Library – nanoclipboard

Preview:

Description:

nanoclipboard is a lightweight and dependency-free JavaScript library which allows to copy any text to your local clipboard by one click.

How to use it:

Insert the JavaScript file nanoclipboard.js into your html page.

<script src="nanoclipboard.min.js"></script>

Create a button and define the content you want to copy using data-clipboard-text attribute:

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

Initialize the nanoclipboard and done.

var clipboard = new NanoClipboard("#btn");

You can also copy text from any text field like input:

<input class="url" value="https://www.cssscript.net"></input>
<button id="btn" data-clipboard-selector=".url" title="Copy Me!">Copy</button>

Callback events.

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