Copiar texto do elemento ao clicar no botão

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

Deixe seu comentário

Conecte-se a uma conta do google para comentar.

Nenhum comentário

    Seja o primeiro a comentar