最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How Can I Copy Text From Hidden Textarea to Clipboard? - Stack Overflow

programmeradmin3浏览0评论

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?

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?

Share Improve this question edited Aug 4, 2018 at 1:43 tao 90.1k17 gold badges132 silver badges173 bronze badges asked Aug 4, 2018 at 1:19 user10606387user10606387 4
  • 1 Have you tried height: 0; visibility: hidden; width: 0; or absolutely positioning the textarea off the screen? – fubar Commented Aug 4, 2018 at 1:24
  • 1 I fail to see a connection between performance tag and this question. Did you add it because you app does not "perform"? – tao Commented Aug 4, 2018 at 1:43
  • @fubar The text cannot be copied if visibility is set to hidden or if display is set to none. – Melab Commented Nov 1, 2018 at 23:27
  • It's worth mentioning that this is also true for a textarea element that is marked as disabled. You need to remove the disabled attribute (even if temporarily) before trying to copy. – Maikon Commented Mar 30, 2020 at 15:30
Add a comment  | 

4 Answers 4

Reset to default 15
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...">

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">

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>

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">

发布评论

评论列表(0)

  1. 暂无评论