如何在 JavaScript 中復制到剪貼板。 在 data-value 中包含值

Question

這是一個相當普遍的問題，但我還沒有找到一個簡單的答案。 由於我不會寫答案，所以我會寫一個問答。 這是stackoverflow上的第一篇文章，請不要嚴格判斷:)

Answer 1

<span class="contacts-link" id="CopyMail" data-value="test@stackoverflow.com"></span>
<span class="link" onClick="copyClipboard()">Copy Hidden Text</span>
<style>
  .contacts-link {
    display: none;
  }
  .link {
    background: #000000;
    color: white;
    padding: 25px;
    font-size: 32px;
    cursor: pointer;
  }
  .link:hover {
    background-color: #ff5722;
  }
  .link:active {
    padding: 30px;
  }
</style>

<script>
  function copyClipboard() {
    const str = document.getElementById("CopyMail").getAttribute("data-value");
    const element = document.createElement("textarea");
    element.value = str;
    element.setAttribute("readonly", "");
    element.style.position = "absolute";
    element.style.left = "-9999px";
    document.body.appendChild(element);
    element.select();
    document.execCommand("copy");
    document.body.removeChild(element);
  }
</script>