Pular para o conteúdo principal

Copiar texto do elemento ao clicar no botão

Copiar texto do elemento ao clicar no botão - Publicado por: Wellington Pragidi Desenvolvedor Web

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.


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";
    });
}
Categoria: JavaScript