Copy selected text to clipboard WITHOUT using flash memory - there must be a cross browser

Question

I want to have a button that selects text in textarea and copies it to the clipboard. It seems I can not find solutions that work in all browsers and will not use flash.

Is this really doable? I have seen this everywhere, but I suppose they use a flash, and I really want to stay away if possible, as some people do not have it.

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

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

(Focus is not absolutely necessary)

Answer 1

ExecCommand ('copy')

There is a very new option. This is a cross browser, but it will take some time until everyone updates their browser.

Works with the function document.execCommand('copy'); . Using this function, you copy the selected text. This will work not only with textarea , but also with each selected text on a web page (for example, 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> 

Answer 2

You must use a Flash add-in that you do not want to use to automatically copy text to the client clipboard. A website that automatically changes the client clipboard without the help of active-x components is a security issue. Please note that active-x components are programs that run on a user computer and, technically, require user consent to install. Given that Clipboard is a component of the operating system, be glad that web browsers do not allow websites to use it by default.

If the user does not have Flash, the Flash function is disabled or the active-x function is disabled, he or she is probably paranoid about security and does not want you to mess with your keyboard. At this point, the user will use not so much automatic or script basic functionality on websites. It’s better not to openly ignore the wishes of the end user.

Refer to the following links:

• How to copy to clipboard in javascript?
• Cross Browser Flags Detection in Javascript

The final answer is to use Zero Clipboard, which is a library that uses a small invisible Flash movie and JavaScript to use the clipboard functions as you want. The library is available here: https://github.com/zeroclipboard/zeroclipboard The second link shows how to determine whether Flash is disabled or not installed, which allows you to display as for JavaScript.

Answer 3

Now we are Clipboard.js from @zenorocha

To use it, download and call the script on the .html page (or install using bower or npm)

 <script src="path_to_script/clipboard.min.js"></script> 

Create a new trigger on script.js

 new Clipboard('.trigger'); 

And go there to see some usage examples: http://zenorocha.imtqy.com/clipboard.js/#usage

Answer 4

 function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); textArea.style.position = 'fixed'; textArea.style.top = 0; textArea.style.left = 0; textArea.style.width = '2em'; textArea.style.height = '2em'; textArea.style.padding = 0; textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.background = 'transparent'; textArea.value = text; textArea.id = 'ta'; document.body.appendChild(textArea); //textArea.select(); var range = document.createRange(); range.selectNode(textArea); textArea.select(); window.getSelection().addRange(range); try { var successful = document.execCommand('copy'); } catch (err) { alert('Oops, unable to copy'); } document.body.removeChild(textArea); return successful; } 

Hope this is helpful

Answer 5

This is a fairly late answer, but for those looking in the future, and has problems implementing the execCommand ('copy') event to work on both desktop and mobile devices.

Cross browser, convenient for mobile devices and no need for external sources or programs

 function CopyString(){ var StringToCopyElement = document.getElementById('YourId'); StringToCopyElement.select(); if(document.execCommand('copy')){ StringToCopyElement.blur(); }else{ CopyStringMobile(); } } function CopyStringMobile(){ document.getElementById("YourId").selectionStart = 0; document.getElementById("YourId").selectionEnd = 999; document.execCommand('copy'); if (window.getSelection) { if (window.getSelection().empty) { // Chrome window.getSelection().empty(); } else if (window.getSelection().removeAllRanges) { // Firefox window.getSelection().removeAllRanges(); } } else if (document.selection) { // IE? document.selection.empty(); } } 

Set the CopyString () function to the click event on everything you want to fire the event. It is available for use on both mobile and desktop operating systems.

Explanation

You need to have two different ways to choose the line to copy, because today the method for this through the desktop will not work for mobile devices. I have an if then function to catch if the desktop worked, and if not, to run code that will work for a mobile device. This method does not require downloads or links. Both methods highlight the text you want to copy, then run the copy command on the clipboard, and then delete the line you are trying to copy. You can mix the code to your liking, but this is the way to do it.