Come copiare span, div o altri contenuti di elementi HTML negli appunti utilizzando jQuery

Lo script monitora un evento click su tutti gli elementi della pagina con classe  = "button-copy". Può essere un pulsante (bottom come nel nostro esempio), o qualsiasi altro elmento HTML che possa essere cliccato.

A questi pulsanti associamo oltre alla classe button-copy, anche un attributo denominato data-container-id contente l'id del contenitore su cui effettuare la copia del contenuto.

Ogni contenitore sarà quidni identificato da un id univoco e potrà contenere o del semplice testo (come nel nostro esempio), o span, div, elenchi puntati o qualsiasi altro elmento HTML.

Codice Html

Nell'esempio seguente vogliamo copiare il contenuto del contenitore div con id univo container-9. Quindi il pulsante di copia oltre alla classe button-copy, avrà un attributo data-container-id contente l'id del contenitore (container-9).

<div id="container-9"> Lorem ipsum dolor sit amet. 33 enim nemo rem tenetur et aspernatur repellendus nam rerum optio aut velit voluptate. Et possimus repellat qui voluptatem animi et internos aspernatur ut possimus rerum est inventore excepturi. </div> <button class="button-copy" data-container-id="container-9">Copia</button>

Codice jQuery

Il codice jQuery, è attivato dal click sul pulsante con  classe button-copy.

La variabile containerID andrà a leggere l'attirbuto data-container-id associato al pulsante cliccato.

La variabile containerText conterrà quidni il contenuto html del div con id uguale a quello associato all'attributo del pulsante.

Letto il contenuto dell'elemento HTML verrà chiamata la funziona denominata copyToClipboard a cui verrà passato il contenuto associato alla variabile containerText. Questa funzione andrà a copiare il testo sia nella formattazione standard che in HTML5. Potrà essere incollato sia in un qualsiasi editor di testo standard che in un campo Rich Text.

$(document).on('click', '.button-copy', function(){ var containerID = $(this).data('container-id');     var containerText = $('#' + containerID).html();     copyToClipboard(containerText); }); function copyToClipboard(text) {     function listener(e) {         e.clipboardData.setData("text/html", text);         e.clipboardData.setData("text/plain", text);         e.preventDefault();         if (e.clipboardData.getData('Text') != "") {             alert("Il codice è stato copiato!");         }     }     document.addEventListener("copy", listener);     document.execCommand("copy");     document.removeEventListener("copy", listener); }

Rapido e semplice!

Spero che tu abbia trovato molto utile questo articolo.

Se sei interessato ad una consulenza per lo sviluppo di un sito internet puoi contattare la web agency di Bari e Provincia Interno15