Nick Brunt Nick Brunt - 3 months ago 19
Javascript Question

Copy selected text to the clipboard WITHOUT using flash - must be cross-browser

I want to have a button which selects the text in a

textarea
and copies it to the clipboard. I can't seem to find any solutions which work in all browsers and don't use flash.

Surely this is doable? I've seen it all over the place but I guess they use flash, which I really want to stay away from if possible as some people don't have it.

This is what I have so far - it just selects the text:

function copyCode() {
$("#output-code").focus();
$("#output-code").select();
}


(The focus is not strictly necessary)

Answer

execCommand('copy')

There is a very new option. It is cross-browser but it will take time until everyone has updated their browser.

It works by using the document.execCommand('copy'); function. With this function you'll copy the select text. This will not only work with textareas but with every selected text on the webpage (like in spans, p, div etc.).

Available in Internet Explorer 10+, Chrome 43+, Opera 29+ and Firefox 41+.

Example

// setup the varriables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy   = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var successful = document.execCommand('copy');

       if(successful) answer.innerHTML = 'Copied!';
       else answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});
<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>