{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 家丑人穷心不美 的问题《Copy text from a hidden control using JavaScript》','https://www.manongdao.com/q-937593.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to be able to place text in a textarea, and copy it to the clipboard, without displaying the textarea.
To copy the text to the clipboard, I create a button with
onclick = "document.getElementById('txtData').select(); document.execCommand('copy');"
and this works fine.
However, if I try to hide the textarea using either
strStyle = 'display:none;'
strStyle = 'visibility:hidden;'
as per
If I want my textarea to be hidden, how do I do it?
then the copy no longer works. The textarea is hidden in both cases, but I have checked the source HTML and the text I want is still there - it's not like hiding the textarea means its contents aren't actually available.
If a full example is appropriate, here's one I took from http://www.jstips.co/en/javascript/copy-to-clipboard/
<head>
<script type='text/javascript'>
function c2cb () {
document.getElementById("txtInvoice").select();
document.execCommand('copy');
}
</script>
</head>
<body ><form id="frmAdminConsole" name="frmAdminConsole" METHOD="POST">
<textarea id='txtInvoice' cols='80' style = 'visibility:hidden;'>
46
JOHN SMITH
GAEL SCOIL NA BFHAL
34 A IVEAGH CRESENT
BELFAST
BT12 6AW
Bubble Ball Football [2017-02-03 09:00] 20 190.00
Nerf Wars [2017-02-05 10:00] 14 190.00
TeamTrek [2017-02-06 12:00] 20 0.00</textarea>
<input type="button" value="Copy!" onclick="c2cb()">
This doesn't work until I remove " style = 'visibility:hidden;'" .
I had what I thought was a D'oh! moment and said "I should use a hidden control", but it doesn't work either.
I would settle for a way to hide the textarea by stealth (make it the same colour as the background or something).
Use style ='display:block; width:0; height:0; opacity: 0;' instead of visibility
I don't have enough "reputations" to comment, so this is entered as an answer. I found that Chrome will not copy the content of an element with width: 0 or font-size: 0 (works in FireFox). I have an absolutely positioned element with opacity: 0, height: 0, placed outside the visible area. I can copy that element just fine, but if I add either width: 0 or font-size: 0, Chrome clears the clipboard instead of copying the selection.