Bem, se você veio até aqui com certeza não é leigo no assunto, portanto vamos direto ao ponto.
Para fazer isso, primeiro é necessário do elemento HTML com o texto a ser copiado e um botão.
<textarea id="text"></textarea>
<button id="copy" type="button">Copiar texto</button>
E agora o JavaScript
if( document.querySelector("#text") ) {
let btnCopy = document.querySelector("#copy");
let text = document.querySelector("#text");
btnCopy.addEventListener('click', function() {
text.select();
text.setSelectionRange(0, 99999);
navigator.clipboard.writeText(text.value);
btnCopy.innerText = "Texto copiado";
window.setTimeout(function() {
btnCopy.innerText = "Copiar texto";
}, 3500);
});
}
No exemplo eu usei o elemento de formulário textarea
, mais pode ser um outro elemento como uma tag div
, ai é só alterar o value
por innerText
ou innerHTML
Também é modificado o texto do botão por um tempo determinado.
Se preferir, ou se houver outra necessidade, é possível configurar para que o texto retorne ao padrão `Copiar texto` assim que o mouse for retirado do botão.
if( document.querySelector("#text") ) {
let btnCopy = document.querySelector("#copy");
let text = document.querySelector("#text");
btnCopy.addEventListener('click', function() {
text.select();
text.setSelectionRange(0, 99999);
navigator.clipboard.writeText(text.value);
btnCopy.innerText = "Texto copiado";
});
btnCopy.addEventListener('mouseout', function() {
btnCopy.innerText = "Copiar texto";
});
}
Comente no