Script js che aggiunge credits durante la copia del testo

Vi è mai capitato di notare quando fate copia-incolla da un sito una frase simile a: continua su … con i link all’articolo che state citando? Se volete realizzare qualcosa di similare questo articolo fa al caso vostro.

DEMO

Il principio su cui si basa lo script è piuttosto elementare. Per prima cosa andiamo ad aggiungere un listener js che “ascolta” quando un utente procede a copiare qualcosa dal nostro sito e ci colleghiamo una funzione per fare la nostra azione.

document.addEventListener('copy', copyShadow); // Listener

Una volta fatto questo passaggio andiamo a recuperare il valore che l’utente ha copiato (nel nostro caso si tratta di testo).

var selection = window.getSelection();

A questo punto andiamo a creare un div nascosto (sempre con javascript) e ci salviamo dentro il testo che l’utente voleva copiare corredato dalla frase che più ci aggrada – come ad esempio: Credits : [URL DEL SITO DINAMICO].

//Nascondo il div helper
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';

//inserisco e popolo il div e setto la selezione con il nuovo div
document.body.appendChild(newdiv);

A questo punto andiamo a sostituire nella memoria con il nuovo testo che contiene la nostra frase.

newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);

Il passaggio finale è eliminare in modo automatizzato il div “ombra” che abbiamo creato per il nostro giochetto.

//Cleanup Helper Div
window.setTimeout(function () {
  console.log("Rimuovi Helper Copy");
  document.body.removeChild(newdiv);
}, 100);

Codice completo dello script

Ecco il codice completo pronto all’uso:

<script>
function copyShadow() {
  console.log("Trigger Helper copy");
    //Identifico parte copiata e costruisco div
    var selection = window.getSelection(),
        pagelink = '<br /> <br />Leggi su: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');

    //Nascondo il div helper
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //inserisco e popolo il div e setto la selezione con il nuovo div
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    //Cleanup Helper Div
    window.setTimeout(function () {
      console.log("Rimuovi Helper Copy");
      document.body.removeChild(newdiv);
    }, 100);

}//copyShadow
document.addEventListener('copy', copyShadow); // Listener
</script>

Se questo articolo ti è stato utile ricordati di condividerlo o lasciarmi il tuo commento!

Foto disponibile su Shutterstock