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

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使用按钮的值:

const copyToClipboard = text => {
  const ta = document.createElement("textarea");
  ta.textContent = text;
  document.body.appendChild(ta);
  ta.select();
  document.execCommand("copy");
  document.body.removeChild(ta);
};

for (const elem of document.querySelectorAll(".copy")) {
  elem.addEventListener("click", e => {
    copyToClipboard(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>

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

你需要 "clipboard-write"允许框架执行复制，这在下面的堆栈片段中可能不起作用。

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

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