copy to clipboard using JavaScript

This article will explain how to bring “copy to clipboard” functionality using JavaScript. Now users are expecting to have copy to clipboard options using JavaScript and not using flash. Here is the library called clipboard.js which is easy to use and integrate. Clipboard.js is flash free solution and API has lots of options to copy / cut the content or text to clipboard.

Setup the clipboard.js API

Include clipboard.js API. I’m using the API from the CDN called cdnjs. Clipboard.js can be load from a third-party CDN provider.

<script src=https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.15/clipboard.min.js></script>

Initiate the clipboard. Place the below JavaScript code to HTML file.

(function(){
	var clipboard = new Clipboard('.btn');
})();

You have done setting up the API.

How to use clipboard.js?

Clipboard has the option to cut or copy the value / content from input box. Below code will do the copy/cut functionality? Yes. Just copy pastes the code to your html file.

<textarea id="copyContent">Copy the Content....</textarea>

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyContent">
    Copy to clipboard
</button>
    
<textarea id="cutContent">Cut the Content....</textarea>

<button class="btn" data-clipboard-action="cut" data-clipboard-target="#cutContent">
    Cut to clipboard
</button>

Options (cut/copy) have to pass it as attribute (data-clipboard-action) and pass the targeted id/class name to attribute (data-clipboard-target).

Note: Cut option work only in input box.

Demo

clipboard.js Events

Events will trigger the success and error function, where we can give customized message or can trigger any other events, etc.

If the event is successful, then it will trigger success event.

If the event is not success, then it will call error event (copy to clipboard not supported browser only) but it will select the content for us and we can do “Ctrl + C”. Find the demo below

(function(){
  var clipboard = new Clipboard('.btn');
  clipboard.on('success', function(e) {
  	e.trigger.textContent = 'Copied';
  });

  clipboard.on('error', function(e) {
  	e.trigger.textContent = 'Press "Ctrl + C" to copy';
  });
})();

Demo

Advanced Usage

Clipboard will support the dynamic content copy option. Two (target, text) events are there to support the dynamic content copy. “target” will return the value from the targeted element and in “text” we can give our custom content. Find the demo below.

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyContent">Copy to clipboard</button>
<div id="copyContent">Copy the content...</div>
<button class="getDynamicVal">Copy Dynamic content to clipboard</button>

Event scripts

(function(){
  new Clipboard('.btn', {
    target: function(trigger) {
    	return document.getElementById('copyContent');
    }
  });

  new Clipboard('.getDynamicVal', {
    text: function(trigger) {
    	return "Place dynamic text...";
    }
  });
})();

Demo

Supported Browsers

This library relies on both Selection and execCommand APIs. The first one is supported by all browsers while the second one is supported in the following browsers.

• Chrome 42+
• Edge 12+
• Firefox 41+
• IE 9+
• Opera 29+
• Safari 10+

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! When success event is called and Press “Ctrl+C” to copy when error event is called because the text is already selected.