Question

我正在尝试添加按钮来复制简单的文本字符串，但没有成功。

function kopiraj() {
  var copyText = document.getElementById("toCopy");
  copyText.select();
  document.execCommand("Copy");
  document.getElementById("telefon").innerHTML = 'Copied';
}

<button type="button" onclick="kopiraj()">Copy</button>
<input type="hidden" id="toCopy" value="123456789">
<p id="telefon"></p>

它没有在剪贴板中放任何东西。

我不需要输入字段。我可以在JS本身添加文本。

Answer 1

使用屏幕外类和hidden属性（后者用于辅助功能），而不是aria-hidden属性：

.offscreen {
    position: absolute;
    left: -999em;
}

<input ... class="offscreen" aria-hidden="true">

Answer 2

您不能.select()隐藏具有visibility: hidden;或display: none;的元素，但您可以执行以下操作：

function kopiraj() {
  var copyText = document.getElementById("toCopy");
  copyText.select();
  document.execCommand("Copy");
}

[aria-hidden="true"] {
  opacity: 0;
  position: absolute;
  z-index: -9999;
  pointer-events: none;
}

<button type="button" onclick="kopiraj()">Copy</button>
<input type="text" id="toCopy" value="123456789" aria-hidden="true">

Answer 3

您无法选择隐藏元素。

最好的方法是将元素中的值复制到另一个可见元素。

如您所见，我创建了一个具有绝对位置的textarea，并将顶部和左侧设置为-9999px。现在，您可以将hidden element中的值复制到textarea，然后将textarea中的值应对到剪贴板

function kopiraj() {
  var copyFrom = document.getElementById("toCopy"); //Value to copy
  var copyTo  = document.getElementById("valueToCopy"); //Visible element to copy the value to
  
  copyTo.value = copyFrom.value; //Fill the visible element with the value to copy 
  copyTo.select(); //Select the value
  document.execCommand("Copy"); //Copy
  copyTo.value = ""; //Empty the visible element after copy
}

.valueToCopy{
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

<textarea class="valueToCopy" id="valueToCopy"></textarea>

<button type="button" onclick="kopiraj()">Copy</button>
<input type="hidden" id="toCopy" value="123456789">

Answer 4

我已经成功使用了不需要任何新HTML元素的JavaScript代码：

var text = ...;
var listener = function(ev) {
    ev.clipboardData.setData("text/plain", text);
    ev.preventDefault();
};
document.addEventListener("copy", listener);
document.execCommand("copy");
document.removeEventListener("copy", listener);

隐藏的元素不会复制到剪贴板

4 个答案: