使用JavaScript从隐藏的控件中复制文本 [英] Copy text from a hidden control using JavaScript
问题描述
我希望能够在文本区域中放置文本，然后将其复制到剪贴板，而不显示文本区域。
要将文本复制到剪贴板，我用
onclick = document.getElementById（'txtData'）。select（）; document.execCommand（'复制'）;
，这很好用。
但是，如果我尝试使用以下任一方法隐藏文本区域
strStyle ='display：none;'
strStyle ='visibility：hidden;'
按照
然后该副本不再起作用。在这两种情况下，textarea都是隐藏的，但是我已经检查了源HTML，并且我想要的文本仍然存在-这并不像隐藏textarea意味着其内容实际上不可用。
如果有一个完整的例子是合适的，这是我从 http获取的例子：//www.jstips.co/en/javascript/copy-to-clipboard/
< head> ;
< script type ='text / javascript'>
函数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维持电流
BELFAST
BT12 6AW
泡泡球[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>
<输入类型=按钮 value =复制！ onclick = c2cb（）>
在我删除 style ='visibility：hidden;'之前，此方法无效。 p>
我有个我以为是D'oh！一会儿说我应该使用隐藏的控件，但这也不起作用。
我会想办法隐身隐藏文本区域（使其与背景颜色相同或类似）。
使用样式='display：block;宽度：0;高度：0; opacity：0;'而不是可见性
< head>< script type ='text / javascript'>函数c2cb（）{document.getElementById（ txtInvoice）。select（）; document.execCommand（'copy'）;}< / script>< / head>< body >< form id = frmAdminConsole name = frmAdminConsole METHOD = POST>< textarea id ='txtInvoice'cols = '80'style ='display：block;宽度：0;高度：0;透明度：0;’> 46约翰·史密斯（Smithgael）SCOIL NA BFHAL34 A IVEAGH CRESENTBELFASTBT12 6AW泡泡球[2017-02-03 09:00] 20 190.00Nerf Wars [2017-02-05 10:00] 14 190.00TeamTrek [2017-02-06 12:00] 20 0.00 < / textarea><输入type = button value =复制！ onclick = c2cb（）>
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
<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='display:block; width:0; height:0; opacity: 0;'>
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()">
这篇关于使用JavaScript从隐藏的控件中复制文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
