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

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