How to create a copy text link? - html

Question

I created a code and I want the visitor to be able to copy the BTC address <small type="text" id="copy-to-clipboard">{{ group.field_groupe_donation.value }}</small> by clicking on the fontawesome icon <button class="btn btn-default btn-xs" onclick="copyText()"><i class="fas fa-copy"></i></button>.
How to do this ?
(function($) {
function copyText() {
var text = document.getElementById("copy-to-clipboard");
text.select();
document.execCommand("copy");
alert("Copied the text: " + text.value);
}
})(jQuery);
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message-donation text-justify">
<div>Si le contenu de ce groupe vous plait, vous pouvez faire un don à son l'auteur en Bitcoin (BTC).</div>
<div class="h3"><i class="fab fa-bitcoin fa-lg btc"></i> Adresse BTC :</div>
{{ content.field_groupe_donation }}
<small type="text" id="copy-to-clipboard">{{ group.field_groupe_donation.value }}</small>
<button class="btn btn-default btn-xs" onclick="copyText()"><i class="fas fa-copy"></i></button>
<div class="mt-3 text-center">
<b>Comment ça marche ?</b>
</div>
</div>
Here is the result :
It does not work.

Answer 1

After modifying your code, I propose to create the "copyText" function in this way.
function copyText() {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($("#copy-to-clipboard").text()).select();
document.execCommand("copy");
$temp.remove();
alert('Copied');
}
The instruction document.execCommand("copy"); allows you to copy all the elements of the DOM you have selected using the .select() function.

Answer 2

You can use the clipboard API for this. Please note that this requires your site to run in a secure context (https or localhost).
Example:
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('bar').addEventListener('click', () => {
if (window.isSecureContext && 'clipboard' in navigator) {
navigator.clipboard.writeText(document.getElementById('foo').textContent);
} else {
console.error(`Clipboard API requires secure context or your browser doesn't support clipboard API`);
}
})
})
<small id="foo">This text should be in your clipboard after clicking the copy button</small>
<br />
<button id="bar" type="button">copy</button>
<br />
<textarea placeholder="try pasting here after clicking copy button" cols="60" rows="3"></textarea>
As with most things, in 2020 you want to be using the browser API and not jQuery.