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

标签 javascript html textarea clipboard

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

为了将文本复制到剪贴板,我创建了一个按钮

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!片刻并说“我应该使用隐藏控件”,但它也不起作用。

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

最佳答案

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

关于javascript - 使用 JavaScript 从隐藏控件复制文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45561771/

相关文章:

javascript - 我如何连接两个元素然后在 React 中渲染它们?

javascript - findOneAndUpdate Mongoose w/PUT REST API

html - 在 css 中设置超链接图像的样式

jquery - 在悬停 div 上更改图像

javascript - 当文本字段或文本区域使用纯 JavaScript 获得焦点时禁用键盘快捷键

Javascript 将时间转换为纪元格式

javascript - React js Material UI Switch组件在循环中

html - 居中、保持纵横比并覆盖屏幕的 CSS Canvas 或 Div 元素?

java - 如何使用 java 中的 jButton 打印 TextArea 中的文本?

javascript - 使用 Javascript 限制 Words 中文本区域的长度?