JavaScript Copy to Clipboard
Providing your users the ability to copy text to the clipboard can make your website much more convenient and valuable. Unfortunately Flash 10 broke most of the methods for doing so. Luckily a great library named ZeroClipboard exists. ZeroClipboard uses a pinch of Flash and touch of JavaScript to make copying to the clipboard happen.
The Sample HTML
<script type="text/javascript" src="ZeroClipboard.js"></script> <textarea name="box-content" id="box-content" rows="5" cols="70"> The David Walsh Blog is the best blog around! MooTools FTW! </textarea> <br /><br /> <p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>
The above HTML features a form element with the ID "box-content" and a button with the ID "copy". Both of those element IDs will come into play with ZeroClipboard.
The ZeroClipboard JavaScript
//set path
ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
With the ZeroClipboard object loaded we:
- Set the path to the SWF file.
- Create what ZeroClipboard calls a "client": A client is a single instance of the clipboard library on the page, linked to a particular button or other DOM element.
- Add a mousedown event listener that places text from inside our textarea into the clipboard.
- Add an optional complete event where we can add functionality to execute once the text has been successfully added to the clipboard.
- "Glue" the button to the functionality we've added in the steps above.
That's it! ZeroClipboard is an outstanding utility to allow copy to the clipboard functionality on any website.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
nice code, thanks!!
I have used ZeroClipboard in a project and it does what it has to with no problems.
P.S. The ZeroClipboard link goes to the demo rather than http://code.google.com/p/zeroclipboard/ .
Thanks for reminding me this handy resource.
Updated. Thanks Umut!
Useful and clean, … but we still need to use flash anyway … Hopefully we’ll find a flash free way ot do that…
@Opi: A few browsers have their own method of allowing Copy to Clipboard. I didn’t mention those because this solution works in all browsers.
Nice hint, thx!
I only need the “ZeroClipboard.js” and “ZeroClipboard.swf” from the tar.gz from the ZeroClipboard Homepage right?
@derschreckliche: Yep, just those two files.
I used this a few weeks ago on a little internal web app. It seems ok, but I have had the odd random bug – it has attached the client to the wrong DOM element, or the client has disappeared completely.
Is this what bit.ly uses?
Great tutorial! Very easy to follow and really nice stuff, keep up the good work.
Сool trick Devid ))
Hey ya Buddy
How can i use this Funtion in my Blog Posts :(
is any way ? plz tell :)
I’ve tried to code but didn’t worked for me… something its wrong on it;
Please check!
Hey David, how would I go about following through with a direct link? I want users on my website to be able to copy the text and then followed by a link to a website.. where it loads it when you click on the copy.
Hello !
I’ve tried to make it work but no way ! No errors but nothing happens.
Do you know if there’s a conflict with jQuery 1.3.2 ?
Thanks in advance :)
Hi,
How to give the anchor (link), so that we can open another site and copy the information same time.
I found this at retailmenot.com site….
can u please do this
Hi David,
Thank you very much for really nice tutorial. I made it works myself.
However still wondering if Zeroclipboard can work with more than one text field and button on one page. Do you have any experience on this?
Thanks again.
Quang
Thank, David) Very useful and clean thing.
hi,
This script not work on IE7 browser. Please check
@shiyam:
The script is very useful. It works perfectly on all browser except the IE7
This script not work on IE7 browse. It displayed the operation aborted error message.
Please check .
Hi David.. thanks for sharing this. Just a quick not saying that the script is not working for Firefox 3.6.2.
Thanks
Ye unfortunately it’s not working in latest version of Chrome or Safari 3.2.2 on Windows XP.
I thought this would be a 2 minute google job but it looks like there is no straight forward solution
Hi David,
Thanks for the good code, but is it working on Firefox, Google chrome, Opera etc.
I see, it only works on IE.
Thanks
Yeah, your demo page only works with IE. On FF & Chrome, it’s not working.
Although demo page at
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
is working fine. I don’t know what’s wrong with your demo page but now I believe that trick should work.
It works on FF also, but the div containing the embedded flash is a couple pixels “over” the button. Try clicking between the button and the textbox.
Thanks for posting this! Neat piece of code.
@David Walsh: Yup, all the other methods are not that great. There are a few which only work in IE geez :| Anyway, great share.. thanks a ton David. You and Chris always save me sometime or the other :P