Copy to clipboard in Javascript

Javascript is the functional programming language with endless possibilities. It is not difficult to do anything with Javascript. Copy to clipboard is something that is functional and pretty useful actually. People wanted to use it as much as possible for their apps.

It is quite connected with Range and selection stuff so better read the last post I published to have a better vision of range and selection stuff.
Copy to clipboard have two ways, first one uses native coding second one is a JS plugin. However both offers different solutions.

Zero Clipboard Js

As Clipboard Js docs describes, it uses Flash to copy something to clipboard. This plugin works with Flash Player 11.0.0 and above it means that there are many limitations out there. First of all lets have a look at browser support.

Yes	Yes	Yes	IE9 +	Yes

The support for IE 7 and 8 was removed in v2.0.0. Well not support of lower version of IE is not a new thing, we all find them in almost every plugin. But believe me 90% of your users could copy stuff easily.

Since this one is complex in a way that it alters the value of clipboard and may not work in every OS. But according to docs it is supported in Windows and major OS means cover almost the globe. Well, browser and OS limitations are aside, but there too many ahead, listed here.

After all the limitations, it is one of the demanded copy to clipboard plugin in front end. This one worked for many and shall work for you too, so lets see how this works.

<script src='ZeroClipboard.js'></script>
<textarea id='text-content'> This is the text content need to be copied.</textarea>
<br/>
<button id='copy-button'>Copy it</button>

In above code there is nothing new, first added the Zero Clipboard javascript, then a textarea of which text need to be copied and a button to copy content of textarea.

 /* Set swf file path */
 ZeroClipboard.setMoviePath('.../ZeroClipboard.swf');
 var copyObject = new ZeroClipboard.Client(); /* Create a new instance of ZeroClipboard object. */
 copyObject.addEventListener('mousedown', function () {
     copyObject.setText(document.getElementById('text-content').value);
 });
 copyObject.addEventListener('complete', function (client, text) {
     alert('copied: ' + text);
 });
 copyObject.glue('copy-button'); /* Now attach instance "copyObject" to its button with glue. */

A few steps more to complete this copying stuff. First added a path of swf file which is technically a requirement of this plugin. Second created an instance of ZerClipboard object, generally known as Client. Then add event listener first one on mousedown, that will set the text of clipboard and second one is on complete. Finally attach this to copy-button.

I do not have a demo right now to show, but this one shows exactly what I explained. To read more about object and instances, read this.

execCommand() method

execCommand() is the function that has turned up our ways of executing commands using Javascript. This one is quite easy method of copying something that is selected. Selection is done programmatically or manually, execCommand('copy') will copy that text to clip board.

execCommand() can do many functions but most important ones are copy or cut. However, browser support is quite odd.

43+	Require Changes	No	IE 10	29+

As mentioned above, browser support is not friendly. Therefore must have fallbacks for older browsers. Firefox requires some preference changes in order to use it, means if user have protected it then it won't work.

<div id='code'>Now let this content is some code, need to be copied.</div>
<div id='copy-button'>Copy Code</div>

The Javascript would be

document.getElementById('copy-button').addEventListener('mousedown', function() {
  var code = document.getElementById('code'),
    message = document.getElementById('message'),
    range = document.createRange();
  /* Add div under range */
  range.selectNode(code);
  window.getSelection().addRange(range);
  /* Copy the selected code */
  document.execCommand('copy');
 /* remove selection so that user never know the something was selected. */
  window.getSelection().removeAllRanges();
}); 

The selection should be removed if its working. Learn more about range and selection here.

Demo

See the Pen copy demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.