Copiar conteúdo ao clicar em texto específico

Ver o tópico anterior Ver o tópico seguinte 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

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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