Copy to Clipboard. Javascript. Cross Browser Solution.

vicnumb Apr 16, 2013

Apr 16 2013 Published by under jQuery & JavaScript

Doing front end coding job, some time ago appeared a interesting problem.

How to facilitate our web service utilization by adding a Copy to Clipboard Button.

The Copy to Clipboard feature appears to be very helpful for website users, as they usually don’t know how to copy content, or don’t think they need a content copy (the copy button is just a hook that makes them click copy button), or they have to run same copy to cllipboard operation multiple times on the same page and one click copy button would save them their time and efforts…

 

Internet Explorer “Copy to Clipboard” solution.

Since the priority for our customer was Internet Explorer, the problem was solved instantly by standard Internet Explorer -JavaScript solution:

Basic implementation of this function (Copy/Paste this snippet, it works as is):

<script>
  function copy_clipboard(somedata)
  {
    window.clipboardData.setData("your data here", somedata);
  }
 
 
  /*calling the copy to clipboard function*/
  copy_clipboard
</script>

Solution is simple and solves all users needs by calling this function by a button or anchor link click. Data can be passed directly or taken from a html construction like text form or a inner html object.

Example of calling copy_clipboard function (Integrate this snippet with the example above):

  <input type="text" id="somedata">
  <input type="button" value="Pass Data" onClick="JavaScript: copy_clipboard(document.getElementById('somedata').value)">

After some using of this solution, we found out – it was not working in all browsers… Our solution appeared to be incomplete.

 

“Copy to Clipboard” crossbrowser solution.

After Issue of Flash 10, FireFox 3.5 and IE 8.0 the Copy to Clipboard stopped working on many websites due to security reasons. Cheaters could use this button to pass a URLs, Advertisments or a scripts. At last Clipboard Copy feature was disabled on most browsers.

As a remaining alternative is ActionScript that allows copy to clipboard on user action. e.g. It is possible to run Copy to Clipboard operation, when ActionScript window is clicked. From the other side the script can be totally transparent.

Thus ZeroClipboard project appeared, by Jon Rohan.
ZeroClipboard library provides copy to clipbaord function by using invisible Flash movie and a JavaScript object.

Zero Clipboard Initialization (place the JavaScrit code somewhere before body closing tag):

<script src="path/to/library/ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( 
  	document.getElementById('clip_copy'), {
  	moviePath: "path/to/library/ZeroClipboard.swf"
	});
</script>

 

Example 1. Copy text from inside of a input, textarea or div element, targeted by id.

a) Textarea

<button id="clip_copy" data-clipboard-target="copy_textarea">Copy Clipboard</button>
<textarea id="copy_textarea"></textarea>

b) Input text element

<button id="clip_copy" data-clipboard-target="copy_input">Copy Clipboard</button>
<input id="copy_input">

c) Inner HTML (div, span or other element targeted by Id)

<button id="clip_copy" data-clipboard-target="copy_div">Copy Clipboard</button>
<div id="copy_div">Inner html element text to copy.</div>

Combine any of examples above with ZeroClipboard library initialization javascript snippet. They all Copy to Clipboard some page content, added by user or published by website owner.

 

Example 2. Pass content directly on button click.

<button id="clip_copy" data-clipboard-text="Text To Copy">Copy Clipboard</button>

Combine this example with ZeroClipboard library initialization javascript snippet above. This example allows dynamical content setup and passing it to ZeroClipboard object. Text can be pulled to data-clipboard-text attribute by a script or a JavaScript function.

 

Example 3. Call Copy to Clipboard function dynamically

<script src="path/to/library/ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( 
  	document.getElementById('clip_copy'), {
  	moviePath: "path/to/library/ZeroClipboard.swf"
	});
</script>
	<button id="clip_copy">Copy Clipboard</button>
	clip.setText( "Copy this text!" );

Another way to set text dynamically and pass it to ZeroClipboard script. This function sets the text to be copied. Text is copied to clipboard after button is clicked.

Tested under browsers:
IE 11 – works
Opera 19.X – works
FF 26.X – works
Chrome 32.X – works
Safari 5.1.X – works

IE 6.0 – does not work

17 responses so far

Leave a Reply