Question

有人知道如何制作使用JavaScript将自己的文本复制到剪贴板的按钮吗？

我的代码：

function myFunction() {
  var copyText = document.getElementByClassName("copy");
  
  copyText.select();
  document.execCommand("copy");
}

<button class="copy">Click to copy this text data to clipboard.</button>
<button class="copy">Click to copy this different text data to clipboard.</button>

Answer 1

select仅在<input>或<textarea>元素中的文本上定义。您可以动态创建节点元素，并使用按钮的值设置其innerText：

for (const elem of document.querySelectorAll(".copy")) {
  elem.addEventListener("click", e => {
    const ta = document.createElement("textarea");
    ta.innerText = e.target.innerText;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
  });
}

<button class="copy">Click to copy this text data to clipboard.</button>
<button class="copy">Click to copy this different text data to clipboard.</button>

存在一个更优雅的选项，并且与Chrome / FF兼容：Clipboard.writeText：

for (const elem of document.getElementsByClassName("copy")) {
  elem.addEventListener("click", e => 
    navigator.clipboard.writeText(e.target.innerText)
  );
}

<button class="copy">Click to copy this text data to clipboard.</button>
<button class="copy">Click to copy this different text data to clipboard.</button>

Answer 2

HTML：

function myFunction() {
  var copyText = document.getElementById("btn");
  navigator.clipboard.writeText(copyText.textContent)
}

JS：

{{1}}

将自己的.innerHTML文本内容复制到剪贴板的HTML按钮

2 个答案: