Copy / Put text on the clipboard with FireFox, Safari and Chrome

Question

In Internet Explorer I can use the clipboardData object to access the clipboard. How can I do that in FireFox, Safari and/or Chrome?

Answer 1

For security reasons, Firefox doesn't allow you to place text on the clipboard. However, there is a work-around available using Flash here: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

The only disadvantage is that this requires Flash to be enabled.

Answer 2

Please be careful not to impact the overall usability of the user's system by overwriting the contents of his/her clipboard with data he/she didn't explicitly choose to put in the clipboard.

Answer 3

Firefox does allow you to store data in the clipboard, but due to security implications it is disabled by default. See how to enable it in "Granting JavaScript access to the clipboard" in the Mozilla Firefox knowledge base.

The solution offered by amdfan is the best if you are having a lot of users and configuring their browser isn't an option. Though you could test if the clipboard is available and provide a link for changing the settings, if the users are tech savvy. The JavaScript editor TinyMCE follows this approach.

Answer 4

If we don't want to chage the settings of FF or get any warning in IE,is Flash the only solution? Do FF and IE use Flash to copy to and from the clipboard? I mean, we can copy and paste in FF without modifyng the settings or in IE without getting warnings...

Answer 5

The copyIntoClipboard() function works for Flash 9, but it appears to be broken by the release of Flash player 10. Here's a solution that does work with the new flash player:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

It's a complex solution, but it does work.

Answer 6

I have to say that none of these solutions really work. I have tried the clipboard solution from the accepted answer, and it does not work with Flash Player 10. I have also tried ZeroClipboard, and I was very happy with it for awhile.

I'm currently using it on my own site (http://www.blogtrog.com), but I've been noticing weird bugs with it. The way ZeroClipboard works is that it puts an invisible flash object over the top of an element on your page. I've found that if my element moves (like when the user resizes the window and i have things right aligned), the ZeroClipboard flash object gets out of whack and is no longer covering the object. I suspect it's probably still sitting where it was originally. They have code that's supposed to stop that, or restick it to the element, but it doesn't seem to work well.

So... in the next version of BlogTrog, I guess I'll follow suit with all the other code highlighters I've seen out in the wild and remove my Copy to Clipboard button. :-(

(I noticed that dp.syntaxhiglighter's Copy to Clipboard is broken now also.)

Answer 7

Online Spreadsheets hook Ctrl+C, Ctrl+V events and transfer focus to a hidden TextArea control and either set its contents to desired new clipboard contents for copy or read its contents after the event had finished for paste.

see also http://stackoverflow.com/questions/233719/is-it-possible-to-read-the-clipboard-in-firefox-safari-and-chrome-using-javascri

Answer 8

A slight improvement on the Flash solution is to detect for flash 10 using swfobject:

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

and then if it shows as flash 10, try loading a Shockwave object using javascript. Shockwave can read/write to the clipboard(in all versions) as well using the copyToClipboard() command in lingo.

Answer 9

So, I've copied the file at http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/ over to our server so that I can modify the content to copy ... but to no avail. Even the untouched copy does not work at all.

Is there an include file or specific server setting that I need to enable to make this work?

Answer 10

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp works with Flash 10 and all Flash enabled browsers.

Also ZeroClipboard has been updated to avoid the bug mentioned about page scrolling causing the Flash movie to no longer be in the correct place.

Since that method "Requires" the user to click a button to copy this is a convenience to the user and nothing nefarious is occurring.

Answer 11

I've used Github's Clippy for my needs, simple Flash-based button. Works just fine, if one doesn't need styling and is pleased with inserting what to paste on the server-side beforehand.

Answer 12

An alternative could be providing user a text input or a text area with contents so user can copy with ctrl+a/ctrl+c pair. For URLs a href links like "Permalink" also work.