Question

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

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

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

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

它仅在可见文本区域时才起作用。如何将隐藏的文本区域内容复制到剪贴板？

Answer 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...">

Answer 2

您可以创建一个附加到正文的临时输入元素，将其值设置为textarea的内容，然后将其用于复制功能。然后您将其从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">

Answer 3

以下代码适用于我的问题。将 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">

Answer 4

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

<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 个答案: