How Can I Copy Text From Hidden Textarea to Clipboard?

Question

I have a hidden text area like this with some values set:

<textarea style="display: none;" id="element_html"></textarea>

On click of a button, I try to copy its content to clipboard using this JS code:

$('#element_html').select();
document.execCommand('copy');

It works only if the text area is visible. How can I copy the hidden text area content to clipboard?

Answer 1

opacity: .01;

does the job. You should combine it with:

height:0;
position:absolute;
z-index: -1;

Do not use pointer-events:none; as it will stop .select() from working, as well.

 function copyContents() { $('#element_html').select(); document.execCommand('copy'); }

 #element_html { position: absolute; opacity: .01; height: 0; overflow: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="element_html">Which textarea?</textarea> <button onclick="copyContents()">Copy</button> <input type="text" placeholder="Paste it here...">

Answer 2

You can create a temporary input element that is appended to the body, set it its value to the textarea's content and then use it for the copy function. Then you remove it from the dom. This will work - irrespective of the display state of the text area.

Note that I did not create this method - I got it from somewhere (possibly another SO answer) and have used it since in a number of instances.

 function copyContents() { var $temp = $("<input>"); var content = $('#element_html').text(); $("body").append($temp); $temp.val(content).select(); document.execCommand("copy"); $temp.remove(); }

 #element_html { display: none }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="element_html">Hidden textarea content</textarea> <button onclick="copyContents()">Click to copy</button> <input type="text" placeholder="Paste here">

Answer 3

The Following codes worked for my problem. paste the js code inside your script tag/file.also add the css style to hide the textarea. Also, I found the following ideas through stackoverflow forum so all credit to those folks.

HTML code:

 function cpy(n) { var id=n; var txt=document.getElementById(id); txt.select(); document.execCommand("copy"); };

 /* The Following Code is to Hide textarea from The user view area */ textarea{ opacity: 0; position: absolute; z-index: -9999; pointer-events: none; }

 <!-- readonly attribute is used because i found that in mobile devices, keyboard poped-up while i clicked the button to copy text--> <textarea id="c1" readonly> This is a text from textarea One. </textarea><br> <!--The cpy(this.id) passes button id to js function--> <button id="c1" onclick="cpy(this.id)">Copy</button> <input type=text placeholder="Paste Here to test">

Answer 4

The problem is that since the textarea has its display property set to none , its content can not be selected. You can absolutely position the textarea to the left with position: absolute and left: -9999px . You should also add z-index: -9999 so it will always be placed under other elements (unless they have a lower z-index).

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea style="position: absolute; left: -9999px;" id="element_html">Text inside textarea</textarea> <button onClick="copy()"> Copy </button> <p/> <textarea placeholder="Paste text here..."></textarea> <script> function copy(){ $('#element_html').select(); document.execCommand('copy'); } </script>