Javascript Copy to Clipboard

Written by David Walsh on Monday, October 19, 2009

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.

View Demo

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.

Download PDF

Follow via RSS Epic Discussion

October 19 / #

Martin Gonzalez says:

nice code, thanks!!

October 19 / #

Umut Muhaddisoglu says:

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.

October 19 / #

David Walsh says:

Updated. Thanks Umut!

October 19 / #

Opi says:

Useful and clean, … but we still need to use flash anyway … Hopefully we’ll find a flash free way ot do that…

October 19 / #

David Walsh says:

@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.

October 19 / #

derschreckliche says:

Nice hint, thx!
I only need the “ZeroClipboard.js” and “ZeroClipboard.swf” from the tar.gz from the ZeroClipboard Homepage right?

October 19 / #

David Walsh says:

@derschreckliche: Yep, just those two files.

October 19 / #

Ben says:

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?

October 20 / #

Inside the Webb says:

Great tutorial! Very easy to follow and really nice stuff, keep up the good work.

October 24 / #

Webchester says:

Сool trick Devid ))

October 26 / #

Amit says:

Hey ya Buddy
How can i use this Funtion in my Blog Posts :(

is any way ? plz tell :)

October 30 / #

Alex says:

I’ve tried to code but didn’t worked for me… something its wrong on it;
Please check!

November 11 / #

eddie says:

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.

November 23 / #

Loo says:

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 :)

December 20 / #

Jammer says:

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

January 11 / #

Quang Nguyen says:

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