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.

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.


Comments

  1. Martin Gonzalez

    nice code, thanks!!

  2. Umut Muhaddisoglu

    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.

    • jitendra

      hello umut,
      i am using the same script,but when i right click on the movie,it shows movie not loaded.
      how to solve this issue.
      thnx in advance.

  3. David Walsh

    Updated. Thanks Umut!

  4. Opi

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

  5. David Walsh

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

  6. derschreckliche

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

  7. David Walsh

    @derschreckliche: Yep, just those two files.

  8. Ben

    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?

  9. Inside the Webb

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

  10. Webchester

    Сool trick Devid ))

  11. Amit

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

    is any way ? plz tell :)

  12. Alex

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

  13. eddie

    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.

  14. Loo

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

  15. Jammer

    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

  16. Quang Nguyen

    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

  17. qfox

    Thank, David) Very useful and clean thing.

  18. shiyam

    hi,

    This script not work on IE7 browser. Please check

  19. shiyam

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

  20. Hung

    Hi David.. thanks for sharing this. Just a quick not saying that the script is not working for Firefox 3.6.2.

    Thanks

  21. DaveKingsnorth

    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

  22. Mohammad JUNED

    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

  23. Dhruv

    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.

  24. andrew

    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.

  25. Sumeet Chawla

    @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

  26. nikesh

    well , i was wondering how to get this working in regards to wordpress content , as i want to apply it in the loop and add a copy to clipboard button for copying the content

    please can you help me out

  27. rayphi

    is there any way to clear the clipboard automatically?

  28. Sergey Lempert

    Do you know the JS-only solution for the copy button?

  29. Aline

    Thanks, perfect!

  30. Ntmd8r

    This is a great start (for me).
    However, I need to be able to copy an entire page to the clipboard,
    so the user can email it to others.
    Javascript has a “Window.Print()” method.

    Why can’t we have a similar “Window.Copy()” method.????

    Or perhaps I should use a “Save as…” facility for the page,
    and then have them email that saved file as an attachment.

    Any thoughts or suggestions ?

  31. Vilmondes Eracton

    It has helped me a lot! Great job!

    Thanks!

  32. Danny

    I cannot get this to work in anyway in my web app. The movie object is hidden somewhere under my website main navigation.
    element.style {
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 99;
    }

    The DOM loads some clip client and some text but I have no idea how to fix this.
    Clicking the button nothing happens.

    Any ideas?
    Danny

  33. Forum informatique

    demo have errors ?

  34. Sumit

    I tried to implement this code on a normal text box and a button, I was able to do that, but when I tried it on a label and button inside a asp.net modalpopup I was not able to do that. PLease tell how can I implement in modalpopup ?


Be Heard!

Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!

Name*:
Email*:
Website: