如何将文本从隐藏的文本区域复制到剪贴板？答案

【问题标题】：How Can I Copy Text From Hidden Textarea to Clipboard?如何将文本从隐藏的文本区域复制到剪贴板？
【发布时间】：2018-08-04 01:19:13
【问题描述】：

我有一个像这样的隐藏文本区域，其中设置了一些值：

<textarea style="display: none;" id="element_html"></textarea>

单击按钮时，我尝试使用此 JS 代码将其内容复制到剪贴板：

$('#element_html').select();
document.execCommand('copy');

仅当文本区域可见时才有效。如何将隐藏的文本区域内容复制到剪贴板？

【问题讨论】：

您是否尝试过height: 0; visibility: hidden; width: 0; 或将文本区域绝对定位在屏幕之外？
我看不到performance 标签和这个问题之间的联系。你添加它是因为你的应用没有“执行”吗？
@fubar 如果visibility 设置为hidden 或display 设置为none，则无法复制文本。
值得一提的是，对于标记为禁用的 textarea 元素也是如此。在尝试复制之前，您需要删除 disabled 属性（即使是暂时的）。

标签： javascript jquery jquery-plugins

【解决方案1】：

opacity: .01;

完成这项工作。您应该将其与：

height:0;
position:absolute;
z-index: -1;

不要使用pointer-events:none;，因为它也会使.select() 停止工作。

function copyContents() {
  $('#element_html').select();
  document.execCommand('copy');
}

#element_html {
  position: absolute;
  opacity: .01;
  height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="element_html">Which textarea?</textarea>
<button onclick="copyContents()">Copy</button>

<input type="text" placeholder="Paste it here...">

【讨论】：

【解决方案2】：

您可以创建一个附加到正文的临时输入元素，将其值设置为文本区域的内容，然后将其用于复制功能。然后将其从 dom 中删除。这将起作用 - 无论文本区域的显示状态如何。

请注意，我没有创建此方法 - 我从某个地方得到它（可能是另一个 SO 答案），并且在许多情况下都使用过它。

function copyContents() {
  var $temp = $("<input>");
  var content = $('#element_html').text();
  
	$("body").append($temp);
    $temp.val(content).select();
    document.execCommand("copy");
    $temp.remove();
}

#element_html {
display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="element_html">Hidden textarea content</textarea>
<button onclick="copyContents()">Click to copy</button>

<input type="text" placeholder="Paste here">

【讨论】：

如果他们已经有了一个额外的表单元素，为什么还要向 DOM 添加一个额外的表单元素？如果您真的想使用 javascript，请更改 textarea 的 style 属性，使其变为 VisiblePainted（和 .select()-able），获取内容，如果需要，将其更改回未绘制。此外，根据浏览器、设备和 textarea 内容的长度，页面可能会在此噱头中闪烁。我建议不要使用这种技术。它会触发整个页面的重绘。

【解决方案3】：

问题在于，由于 textarea 的显示属性设置为none，因此无法选择其内容。您可以使用position: absolute 和left: -9999px 将文本区域绝对定位到左侧。您还应该添加 z-index: -9999，以便它始终位于其他元素下方（除非它们的 z-index 较低）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="position: absolute; left: -9999px;" id="element_html">Text inside textarea</textarea>
<button onClick="copy()">
Copy
</button>
<p/>
<textarea placeholder="Paste text here..."></textarea>
<script>
function copy(){
$('#element_html').select();
document.execCommand('copy');
}
</script>

【讨论】：

【解决方案4】：

以下代码解决了我的问题。将 js 代码粘贴到您的脚本标签/文件中。还添加 css 样式以隐藏文本区域。另外，我通过 stackoverflow 论坛发现了以下想法，因此所有这些都归功于这些人。

HTML 代码：

function cpy(n)
{
var id=n;
var txt=document.getElementById(id);
txt.select();
document.execCommand("copy");
};

  /* The Following Code is to Hide textarea from The user view area */
    textarea{
         opacity: 0;
  position: absolute;
  z-index: -9999;
  pointer-events: none;
    }

<!-- readonly attribute is used because i found that in mobile devices, keyboard poped-up while i clicked the button to copy text-->

<textarea id="c1" readonly>
This is a text from textarea One.
</textarea><br>
<!--The cpy(this.id) passes button id to js function-->
<button id="c1" onclick="cpy(this.id)">Copy</button>
<input type=text placeholder="Paste Here to test">

【讨论】：