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
this is not working in IE
Zero Clipboard sulution works under IE 11.X – worked
For older IE versions like IE 6.X – use the first example.
Here are the examples working in all browsers including IE, excepting IE6.0 and lower versions:
http://ready2gosoft.com/1/example1_a.html
http://ready2gosoft.com/1/example1_b.html
http://ready2gosoft.com/1/example1_c.html
http://ready2gosoft.com/1/example2.html
http://ready2gosoft.com/1/example3.html
Yes, but what about when having multiple text lines to copy? For example I wish to have a button to copy line1 a button to copy line 2 a button to copy line 3… and so on. The script works perfect for one text package, but what about more than 1? Is that possible?
you will have to define multiple objects for multiple buttons and text fields.
See working example here:
http://ready2gosoft.com/1/example4.html
Your examples don’t work either. Opera 18.x
update your Opera to 19.x and retest. All examples above worked under my Opera 19.x
shows – zeroclipboard is not a constructor – error my code is
Zeroclipboard Test
Click the button to copy this text.
Copy Clipboard
window.onload = function(){
var clip = new ZeroClipboard(
document.getElementById(‘clip_copy’), {
moviePath: “zeroclipboard-master/ZeroClipboard.swf”
});
};
any idea, what browser does this error appear for?
Thanks! Saved my day…
Can anyone help me?
I do not know why it does not work, this is my code:
——————————————————————————————————
Zeroclipboard Test
Enter text to copy then click the button.
Copy Clipboard
var clip = new ZeroClipboard(
document.getElementById(‘clip_copy’), {
moviePath: “http://www.ranktab.com/explore/wp-content/themes/Share/js/ZeroClipboard.swf”
});
——————————————————————————————————
this url is not loading the flash image:
http://www.ranktab.com/explore/wp-content/themes/Share/js/ZeroClipboard.swf
Without flash image Copy to Clipboard button doesn’t work.
Hey, i have a little problem..
The examples I found here worked perfectly in chrome (i mean these URLS – http://ready2gosoft.com/1/example4.html etc. work just fine, text is copied as it should).
Source code of my *.html is exactly the same as the source of the example.
The paths to files are okay, I checked them many times.
In chrome console there is no error or warning, but my text is simply NOT copied to clipboard.
What should I do? I need this for my project.
first of all make sure you’ve included the .swf file and the path to it is correct. This file is the key part of copy to clipboard. If still not working, leave your url here, we’ll test and advice.
Thank you for your superfast reply. The .swf file is included and it is in the same folder as the .html (so the paths are just “”ZeroClipboard.js” and “ZeroClipboard.swf”.. I can’t give you url, because I want the site to work only localy, offline – may that be a problem?
If you can please look at this:
http://www.datafilehost.com/d/3406e527
(i just simply re-done your example3)
I don’t know what is going wrong.
Nobody can help? :/
Looks like their new Copy to Clipboard updated version doesn’t work. Download and use my scripts:
http://ready2gosoft.com/1/zeroclipboard-master/ZeroClipboard.js
http://ready2gosoft.com/1/zeroclipboard-master/ZeroClipboard.swf