HTML-кнопки, которые копируют свое собственное текстовое содержимое .innerHTML в буфер обмена

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

HTML:

<button id="btn" onclick="myFunction()">Copy text</button>

JS:

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

Answer 2

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>