Copiar conteúdo ao clicar em texto específico

Ir para baixo

Copiar conteúdo ao clicar em texto específico Empty Copiar conteúdo ao clicar em texto específico

Mensagem por Don Corleone 19.10.24 13:59

Esses dias estava com um pouco de tempo e vi uma necessidade específica para o meu fórum, porém que pode ajudar outros administradores em seus fóruns e decidi compartilhá-la. Em meu fórum existe uma lista que o membro pode copiá-la, mas isto ocupava muito espaço de caracteres no tópico, pois eu deixava o código BBCode dentro da tag code para rápido acesso do membro. Então decidi criar um script que o conteúdo seria copiado ao clicar no nome em destaque na lista. Observe o HTML abaixo.

Código:
<ul><li><span>Clique para copiar</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quam aperiam obcaecati, atque, ipsa ut, repellendus minima rem facilis doloremque numquam alias autem aspernatur excepturi. Doloremque quibusdam dolorem hic saepe!</li><li><span>Clique para copiar 2</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quam aperiam obcaecati, atque, ipsa ut, repellendus minima rem facilis doloremque numquam alias autem aspernatur excepturi. Doloremque quibusdam dolorem hic saepe!</li><ul>

Observe que existe uma lista e o objetivo é copiar todo o conteúdo dentro do li específico. A solução segue abaixo, mas antes é necessário um input ou um textarea para poder copiar o conteúdo. Então o primeiro passo é colocar o código abaixo na área que deseja que este efeito funcione.

Código:

<textarea id="seuTxt" value="Olá mundo!" style="height: 0px;width: 0px;opacity: 0;position: absolute;"></textarea>

Posteriormente utilize o código abaixo para ao clicar no span todo o li específico será copiado para a sua área de transferência. Deixo um link no JSFiddle para ver o funcionamento.

Link: https://jsfiddle.net/Kadanda/9qka16cw/5/

Código:

/***
* Copiar ao clicar
* By Don Corleone(FdF);
*/

$(document).ready(function() {
$("ul li span:first-child").click(function(){
var t = this.closest("li");
var tt = t.innerHTML;
var ttt = tt.trim();
console.log(ttt);
$("#seuTxt").val('<li>'+ttt+'</li>');

    var x = $('#seuTxt').select();
    try {
            var ok = document.execCommand('copy');
            if (ok) { alert('Copiado para a sua área de transferência.'); }
        } catch (e) {
        alert(e)
    }
});
});

Não sei se a forma mais eficiente, mas depois de muita pesquisa foi assim que consegui o efeito desejado.
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos