Clipboard Copy

Jeffrey Larson

In the past I’ve wondered if it was possible to make a cross-browser (JavaScript) script that a webpage could execute to copy some text to the windows clipboard. Would be handy and would save the user from pulling the whole CTRL+C trick out.

It was pretty easy to do with Internet Explorer with the code below… but we all don’t use IE.

holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");

Credit to Mark O’Sullivan of http://lussumo.com/ since he has a solution for this problem. In his file browser / photo gallery application, there is a link to copy the URL of the file to the clipboard… works in both Firefox and IE (I also checked in Opera 8.5 and it didn’t seem to work).

Here is the solution implemented in a javascript function:

Update: I have updated the copy() function in the script to use encodeURIComponent() instead of escape() which will allow use of ‘+’ to be copied as well.


function copy(inElement) {
  if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
      range.execCommand('Copy');
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

Pretty slick I’d say, he’s using a Macromedia Flash file to perform the copy on the Browser’s behalf (since Firefox/Netscape’s security settings do not allow access to the clipboard by default).

I’ve uploaded the SWF file that you can use in your own webpage.

This software is licensed under the GPL so you can take this solution, change it, whatever, free.


133 Responses to “Clipboard Copy”

  • Dirk Says:

    Hi,

    I’m using this wonderful little tool for a while now in a jQuery application. Now I got some user feedback that there seems to be a problem with Flash 10. The clipboard seems to stay empty with Flash 10?

    Is this a known problem? Is there a already a solution?

  • mptre Says:

    Hello,
    First of thanks for a great script. Been using it for my url-shortening-site (http://korta.nu)for awhile. I recently upgraded to flash 10 on my mac, running Leopard. The swf for the copy-script doesn’t seem to be working with flash 10. I don’t have any flash-skills, could anyone look in to this problem?

    Would really appreciate it!

  • wrybread Says:

    Holy overly complicated, Batman!

    What’s the point of making this script so unreadable? And why use a different method for IE, if the Flash method works for it too? Simple is good. And plus simple lets people adapt it to do things like copy text that isn’t in a form element, which seems a pretty likely use of it. Not to mention that your example didn’t even give an example of using it.

    Anyway, a much simpler version, and an example of using it that doesn’t require the text to be embedded in a form.

    function copy(text) {

    var text_encoded = encodeURIComponent(text);

    var flashcopier = ‘flashcopier’;

    if(!document.getElementById(flashcopier)) {
    var divholder = document.createElement(’div’);
    divholder.id = flashcopier;
    document.body.appendChild(divholder);
    }

    document.getElementById(flashcopier).innerHTML = ”;
    var divinfo = ”;
    document.getElementById(flashcopier).innerHTML = divinfo;

    }

    And then to use it:

    test

  • abhijeet Says:

    This doesn’t work with safari.. although it works pretty well on IE, FF, Chrome

  • Pkhunter Says:

    It seems Flash 10 — the latest update as of this writing — has broken this script. Any thoughts or upgrades? (Please CC me if someone has an idea, as this blog doesn’t have the “Notify on further comments” functionality). Thanks!

  • Pkhunter Says:

    I prefer Snipr.com.

  • Robert Says:

    Nice solution that solved a problem I had with copying image urls to the clipboard for image posting to blog/forum application.

    Worked fine in IE7, FF3 and Opera 9.61, as well as Google Chrome.

    Thanks! :)

  • sovic Says:

    hi i found this piece of code very usefull, but since i upgraded to flash player 10 it stopped working, is it just my problem or is there something wrong with the swf file? (on flash player 9 everything works perfect)

  • me-eyes-to-close Says:

    Works great in Firefox but getting errors in IE6 and IE7

    error on page “BodyLoaded” not defined ?? please help

  • Jaxolotl Says:

    Bad news, the script doesn’t work anymore on Firefox or Google Chrome, (IE still send a warning but allows user to accept the acces to the clipboard).
    Since it works on IE I suppose is a browser security feature to prevent clipboard hijacking.

  • www.tjenarvi.com Says:

    Hi,

    Will not work in Flash 10, security restrict System.setClipboard() easily. Any better solution?

    tjenarvi.com

  • khurram Says:

    Does anybody have the solution for this as i m haveing the same problem i.e formated text is not copied only plain text is copied using the above code

  • redbeard Says:

    I’ve been looking into the problems caused by Flash 10’s new security restrictions.

    It seems that using the clipboard with Flash now requires direct user interaction with Flash (e.g. clicking a button in a Flash movie), and won’t work if you call the required function using javascript.

    I really don’t know any Flash, but I wonder if this is still possible if the button used is actually a Flash movie itself. Not great I know, but may well be the only way forward. Anyone want to have a go?

  • Guy Says:

    Good News!
    FF 3.0.3 does NOT work but FF 3.0.4 does work
    Google Chrome (3.154.9) does work
    IE7 (7.0.5730.13) does not work with Flash,
    but does work using window.clipboardData.setData technique
    I’m happy for now

  • Amin Says:

    I am also interested in a Flash 10 ready solution. Any ideas? Please please? This blog does not have “Notify when someone new comments” so could you please CC me when you come up with a solution? Many thanks!

  • Mandeep Dang Says:

    Hi Jeff.

    Thanks for the wonderful control!

    It has made our life a lot easier =)

    Are you planning any new release in the near future, compatible for the Flash 10 release.

    Thanks,
    Mandeep

  • Pompeus, the gamer Says:

    There is a way to copy text for FF without using flash using following script. (I’ve tested it only for FF 3)

    function copy()
    {
    var text2copy=”Copy me into buffer”;

    netscape.security.PrivilegeManager.enablePrivilege(’UniversalXPConnect’);

    var Cc = Components.classes;
    var Ci = Components.interfaces;
    var Cstr = Cc["@mozilla.org/supports-string;1"];
    var CTra = Cc["@mozilla.org/widget/transferable;1"];
    var CClp = Cc["@mozilla.org/widget/clipboard;1"];

    var str = Cstr.createInstance(Ci.nsISupportsString);
    if (!str) return false; str.data = text2copy;

    var trans = CTra.createInstance(Ci.nsITransferable);
    if (!trans) return false;

    trans.addDataFlavor(”text/unicode”);
    trans.setTransferData(”text/unicode”, str, text2copy.length * 2);

    var clipboard = CClp.getService(Ci.nsIClipboard);
    if (!clipboard) return false;

    clipboard.setData(trans, null, Ci.nsIClipboard.kGlobalClipboard);
    return true;
    }

  • Matthew Grdinic Says:

    prompt(’Prompt Message:’,'This text will show in the prompt’);

    Hate to say it, but Firefox/Hackers have screwed us, this is the best we’ve got now. How lame. Good news is, this still works in IE:

    function copyCode(inElement) {
    if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
    range.execCommand(’Copy’);

    then fall through will this for fire fox:

    } else {
    prompt(’Message:’,'Text to show’);

    You may also want to check out:
    https://developer.mozilla.org/en/Using_the_Clipboard

    Which fails when used as is, perhaps that code is more for extensions than web pages.

  • newbe Says:

    Hi All,

    I am new to javascript and I have requirement which should copy to clipboard in IE,Safari and firefox.

    I tried the above code and have few questions
    I am in Windows m/c where should I place the _clipboard.swf for example
    I have placed in c:\_clipboard.swf

    Do I need to mention in the java script as “embed src=”c:\\_clipboard.swf” or it is not possible to test from the local hard disk ? Do we need to deploy on the server and give the actual path?

    _clipboard.swf

  • Raul Paula Says:

    Better solution not exist it does? Need cross method to use I do.

  • Bruno Says:

    Hi guys, i found a simple solution to use it with Firefox and IE7 together.
    In fact, when is IE, the script will exec another simple code.

    function copy(inElement) {
    if(navigator.appName == ‘Microsoft Internet Explorer’){
    window.clipboardData.setData(’text’,inElement.value);
    } else {
    if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
    range.execCommand(’Copy’);
    } else {
    var flashcopier = ‘flashcopier’;
    if(!document.getElementById(flashcopier)) {
    var divholder = document.createElement(’div’);
    divholder.id = flashcopier;
    document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = ”;
    var divinfo = ”;
    document.getElementById(flashcopier).innerHTML = divinfo;
    }
    }
    }

    On form

    For me works fine with Firefox and IE7

    rugs

  • JT Says:

    see http://www.retailmenot.com/

    The flash clipboard works on this site in IE and FF with Flash 10. What are they using that is different????

  • Klaus Says:

    As with all the recent comments, I’m also experiencing the same thing :( All of a sudden it stopped working. Still working with IE after confirming the security warning. But since we all use firefox in the company and this script is only used in our backoffice, then it’s pretty unfortunate that it doesn’t work no more.

    Anybody know a solution?

  • Rich Says:

    This script is great, please let me know if there is a revision that will do the same thing. I guess for now I have to use IE as I have become extremely reliant on this script.

  • gh3 Says:

    You are a saver neat solution save me of lots of problems

  • Jerry Qu Says:

    Hi,when i installed flash 10,it won’t work any more ,too.
    How to fix it?

  • Nikola Says:

    Hello,

    I found this project on google and it looks that it works on flash 10
    http://code.google.com/p/zeroclipboard/

  • Michael Hamilton Says:

    Flash 10 will allow clipboard access if there is a user interaction with the actual flash file. This means that we should be able to fix this by overlaying a completely transparant instance of this flash file over whichever button we need to use. An example is the fancy uploader’s new flash 10 version which requires this same type of flash interaction. I am not savvy with flash, if someone is able to implement this possibly with a mootools/flash combo please e-mail me.

  • Anya Says:

    thanks :-)

  • Yao Says:

    Thank you so very much, this is exactly what I’ve been looking for!

  • Bill Harding Says:

    Ladies and gentlemen, your Flash 10-compatible answer:

    http://code.google.com/p/zeroclipboard/

  • Supporting the system clipboard in your Web applications; What a pain! on Dion Almaer's Blog Says:

    [...] first version that we had, used Clipboard Copy which accesses the clipboard APIs available in Flash. Unfortunately, our parade was rained on. With [...]

Leave a Reply