Copiar conteúdo ao clicar em texto específico

[Don Corleone]

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.