Clipboard.js: copia e incolla automatico in javascript

Pubblicato il 28/12/2016 da Giuseppe Riccio In: Script


Copiare il testo negli appunti non dovrebbe essere un'operazione lenta e difficile. Non dovrebbe richiedere decine di passaggi di configurazione o centinaia di KBs per caricare. Ma più di tutto, non dovrebbe dipendere da Flash o qualsiasi altro framework. Ecco perché esiste clipboard.js, una piccola libreria di soli 3Kb che a detta dell'autore Zeno Rocha rappresenta "un moderno approccio nel copiare il testo negli appunti". L'installazione e l'utilizzo sono immediati; includiamo lo script nell'head della nostra pagina:
<script type="text-javascript" src="clipboard.min.js"></script>

per poi crearne un'istanza da associare ad un selettore nel DOM, ad un elemento HTML o un elenco di elementi.
new Clipboard('.btn');

Un caso d'uso piuttosto comune è quello di copiare il contenuto di un altro elemento. È possibile farlo con l'aggiunta di un attributo "data-clipboard-target" all'elemento in questione. Inoltre, è possibile definire un attributo "data-clipboard-action" per specificare se si desidera copiare o tagliare contenuti. Se si omette questo attributo,la copia verrà utilizzata per impostazione predefinita. In realtà non ci sarebbe nemmeno bisogno di un elemento da cui copiare il contenuto. Si può includere un attributo "data-clipboard-text" nell'elemento interessato con il testo da copiare come valore. Piccola pecca della libreria e che l'azione di taglio funziona solo su elementi TEXTAREA e INPUT. La libreria supporta tutti i browser ed è disponibile con licenza MIT a questo indirizzo.