Question

我希望能够将文本放在textarea中，并将其复制到剪贴板，而不显示textarea。

要将文本复制到剪贴板，我使用

创建一个按钮

onclick = "document.getElementById('txtData').select(); document.execCommand('copy');"

这很好。

但是，如果我尝试使用

隐藏textarea

strStyle = 'display:none;'

strStyle = 'visibility:hidden;'

按照

If I want my textarea to be hidden, how do I do it?

然后副本不再有效。 textarea在两种情况下都是隐藏的，但我检查了源HTML，我想要的文本仍然存在 - 它不像隐藏textarea意味着它的内容实际上不可用。

如果一个完整的例子是合适的，这是我从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()">

除非我删除“style ='visibility：hidden;'”。

，否则这不起作用

我有我认为的D'哦！那一刻并说“我应该使用一个隐藏的控件”，但它也不起作用。

我愿意通过秘密隐藏文本区域（使其与背景或其他颜色相同）。

Answer 1

使用style ='display：block;宽度：0;高度：0;不透明度：0;'而不是可见性

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

Answer 2

我没有足够的“信誉”来发表评论，因此将其输入为答案。我发现Chrome不会复制宽度为0或字体大小为0的元素的内容（在FireFox中有效）。我有一个绝对定位的元素，它的不透明度：0，高度：0，位于可见区域之外。我可以很好地复制该元素，但是如果我添加width：0或font-size：0，Chrome会清除剪贴板，而不是复制选择。

使用JavaScript

2 个答案: