使用 JavaScript 从隐藏控件复制文本

Question

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

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

创建了一个按钮

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

这很好用。

但是，如果我尝试使用任一方法隐藏文本区域

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'oh！片刻并说 "I should use a hidden control"，但它也不起作用。

我会选择一种隐藏文本区域的方法（使其与背景颜色或其他颜色相同）。

Answer 1

使用样式 ='display:block; width:0; height:0; opacity: 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

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

使用 JavaScript 从隐藏控件复制文本

Copy text from a hidden control using JavaScript

html

javascript

clipboard

textarea