Es una pregunta bastante común, pero no he encontrado una respuesta simple. Como no puedo escribir las respuestas, escribiré una pregunta-respuesta. Esta es la primera publicación en stackoverflow, no juzgue estrictamente :)
<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>