115

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

6

19 Answers 19

50
+150

For security reasons, Firefox doesn't allow you to place text on the clipboard. However, there is a workaround available using Flash.

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.

The source is currently dead: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (and so is its Google cache)

4
  • 17
    A third disadvantage is that it won't work locally (file://) without changing the permissions on flash. code.google.com/p/zeroclipboard is a library built around this method.
    – Regis Frey
    Apr 29, 2010 at 20:03
  • @b1naryatr0phy: True for the most part but HTML5 still does not yet have a replacement for the clipboard functionality currently offered by Flash (e.g. using ZeroClipboard). Jan 17, 2013 at 16:45
  • 3
    As of 2014, this method no longer works in any modern browser. ZeroClipboard is the only technology which currently solves this
    – Cozzamara
    Feb 19, 2014 at 8:58
  • As of Sept 2015, Flash is dying a relatively quick death and ZeroClipboard is based around its use. See my answer below from August 2015 for a solution that does not use Flash.
    – a coder
    Sep 1, 2015 at 11:55
23

There is now a way to easily do this in most modern browsers using

document.execCommand('copy');

This will copy currently selected text. You can select a textArea or input field using

document.getElementById('myText').select();

To invisibly copy text you can quickly generate a textArea, modify the text in the box, select it, copy it, and then delete the textArea. In most cases this textArea wont even flash onto the screen.

For security reasons, browsers will only allow you copy if a user takes some kind of action (ie. clicking a button). One way to do this would be to add an onClick event to a html button that calls a method which copies the text.

A full example:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

13

Online spreadsheet applications hook Ctrl + C and 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 Is it possible to read the clipboard in Firefox, Safari and Chrome using JavaScript?.

10

It is summer 2015, and with so much turmoil surrounding Flash, here is how to avoid its use altogether.

clipboard.js is a nice utility that allows copying of text or html data to the clipboard. It's very easy to use, just include the .js and use something like this:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js is also on GitHub.

1
  • 2
    The first link you provide (to npmjs.com) says that it doesn't work with IE, but it does (as in fact it says on GitHub)
    – gordon613
    Aug 19, 2015 at 12:51
9

As of 2017, you can do this:

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

And now to copy copyStringToClipboard('Hello, World!')

If you noticed the setData line, and wondered if you can set different data types, the answer is yes.

3
  • for safari i needed to run a .select() on a input box before calling this.
    – Chad Cache
    Jun 24, 2017 at 0:12
  • Should you remove the event listener too? May 9, 2018 at 10:44
  • 1
    @ChrisWalsh Yes, it is done inside the handler in the code sample. The reason is that the handler will still be in memory otherwise.
    – Spoike
    Mar 25, 2019 at 8:56
8

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.

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.

1
  • 6
    Its not broken. It was removed from the newest API for security reasons
    – Glycerine
    Feb 22, 2011 at 11:15
4

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

2
  • 3
    It's sad when functionality has to take a step backwards in the name of security. I really wish there were a solution that was both secure and still allowed access to the clipboard from a web page, even if the user has to grant it explicit permission once or something.
    – devios1
    Mar 21, 2012 at 15:34
  • That's what IE does by default Jul 2, 2012 at 5:43
3

Check this link:

Granting JavaScript access to the clipboard

Like everybody said, for security reasons, it is by default disabled. The page above shows the instructions of how to enable it (by editing about:config in Firefox or the user.js file).

Fortunately, there is a plugin called "AllowClipboardHelper" which makes things easier with only a few clicks. however you still need to instruct your website's visitors on how to enable the access in Firefox.

2
  • Don't suppose there's anything like this for Chrome/WebKit?
    – devios1
    Mar 21, 2012 at 15:35
  • The link seems to be broken. But it is not broken, just very, very slow... Aug 17, 2021 at 3:05
3

Use the modern document.execCommand("copy") and jQuery. See this Stack Overflow answer.

var ClipboardHelper = { // As Object

    copyElement: function ($element)
    {
        this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

How to call it:

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

// jQuery document
;(function ( $, window, document, undefined ) {

    var ClipboardHelper = {

        copyElement: function ($element)
        {
           this.copyText($element.text())
        },
        copyText:function(text) // Linebreaks with \n
        {
            var $tempInput =  $("<textarea>");
            $("body").append($tempInput);

            //todo prepare Text: remove double whitespaces, trim

            $tempInput.val(text).select();
            document.execCommand("copy");
            $tempInput.remove();
        }
    };

    $(document).ready(function()
    {
        var $body = $('body');

        $body.on('click', '*[data-copy-text-to-clipboard]', function(event)
        {
            var $btn = $(this);
            var text = $btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });

        $body.on('click', '.js-copy-element-to-clipboard', function(event)
        {
            ClipboardHelper.copyElement($(this));
        });
    });
})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
    "Hello
     World">
    Copy Text
</span>

<br><br>
<span class="js-copy-element-to-clipboard">
    Hello
    World
    Element
</span>

2

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

1

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.

1
  • The link is (effectively) broken: "This domain is parked free of charge with NameSilo.com" Aug 17, 2021 at 2:59
1

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.

1

Try creating a memory global variable storing the selection. Then the other function can access the variable and do a paste. For example,

var memory = ''; // Outside the functions but within the script tag.

function moz_stringCopy(DOMEle, firstPos, secondPos) {

    var copiedString = DOMEle.value.slice(firstPos, secondPos);
    memory = copiedString;
}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0, newpos) + memory + DOMEle.value.slice(newpos);
}
1
  • 3
    could copy from any where else not considering inside the page alone
    – Marwan
    May 2, 2011 at 9:12
1

If you support Flash, you can use https://everyplay.com/assets/clipboard.swf and use the flashvars text to set the text.

https://everyplay.com/assets/clipboard.swf?text=It%20Works

That’s the one I use to copy and you can set as extra if it doesn't support these options. You can use:

For Internet Explorer:

window.clipboardData.setData(DataFormat, Text) and window.clipboardData.getData(DataFormat)

You can use the DataFormat's Text and URL to getData and setData.

And to delete data:

You can use the DataFormat's File, HTML, Image, Text and URL. PS: You need to use window.clipboardData.clearData(DataFormat);.

And for other that’s not support window.clipboardData and swf Flash files you can also use Control + C button on your keyboard for Windows and for Mac its Command + C.

1

From addon code:

For how to do it from Chrome code, you can use the nsIClipboardHelper interface as described here: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

1
  • The link is broken: "Page not found" Aug 17, 2021 at 3:13
1

Use document.execCommand('copy'). It is supported in the latest versions of Chrome, Firefox, Edge, and Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

1

Clipboard API is designed to supersede document.execCommand. Safari is still working on support, so you should provide a fallback until the specification settles and Safari finishes implementation.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};
<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

For security reasons clipboard Permissions may be necessary to read and write from the clipboard. If the snippet doesn't work on Stack Overflow give it a shot on localhost or an otherwise trusted domain.

1

Building off the excellent answer from David from Studio.201, this works in Safari, Firefox, and Chrome. It also ensures no flashing could occur from the textarea by placing it off-screen.

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {

    function copyText(text) {
        // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
    }


    // ============================================================================
    // Class API
    // ============================================================================
    return {
        copyText: copyText
    };
})();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.