Question

92

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

rated 0 times [ 97] [ 5] / answers: 1 / hits: 79253 / 13 Years ago, thu, june 9, 2011, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eden

Add To Favorites

Follow

Total Points: 730

Total Questions: 117

Total Answers: 117

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

eden questions

1 Implementing advanced pagination to my react site using react-bootstrap

Thu, Mar 11, 21, 00:00, 3 Years ago

1 Dynamically access Vue component data variable names

Sun, Mar 7, 21, 00:00, 3 Years ago

1 How to test arrow function calling in react component with jest?

Wed, Dec 9, 20, 00:00, 4 Years ago

1 npm run test - unsafe-perm in lifecycle

Mon, Jul 27, 20, 00:00, 4 Years ago

1 How to remove the item from the local storage by clicking on div?

Thu, Dec 5, 19, 00:00, 5 Years ago

View All

answered 13 Years ago oliverg · Accepted 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 span, p, div, etc.).

Available in Internet Explorer 10+, Chrome 43+, Opera 29+ and Firefox 41+ (see execCommand compatibility here).

Example

// Setup the variables

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 ok = document.execCommand('copy');



       if (ok) 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>