Corsi on-line

Gestione degli appunti con clipboard.js

clipboard.js è una libreria realizzata in linguaggio JavaScript e concepita per offrire un approccio più moderno alla gestione delle porzioni di testo copiate negli appunti; l’utilizzatore di questa soluzione verrà avvantaggiato dal suo peso quasi irrilevante, parliamo di appena 2Kb, caratteristica che ne semplificherà enormemente l’integrazione all’interno di una qualsiasi Web application o di un sito Internet.

Cattura

Rilasciato sotto licenza Open Source e quindi liberamente adattabile sulla base delle esigenze legate al proprio progetto, clipboard.js potrà essere scaricato facilmente utilizzando comuni pakage manager come npm e bower, in alternativa si potrà effettuare il download dell’archivio compresso in formato Zip linkato sull’home page del sito ufficiale; fatto questo, il file “.js” necessario per l’accesso alle funzionalità sarà presente nella cartella dist e si potrà quindi procedere con la sua inclusione:

<script src="dist/clipboard.min.js"></script>

La libreria dovrà essere inizializzata tramite istanza utilizzando un selettore del DOM (Document Object Model), come mostrato attraverso nella seguente istruzione:

new Clipboard('.btn');

Ora non resterà che specificare l’elemento associato al selettore che, nel caso specifico del nostro esempio, sarà un normale button con relativa regola di stile:

<button class="btn">

clipboard.js sfrutta gli attributi per i dati di HTML5, si potrà per esempio utilizzare l’attributo data-clipboard-target per definire sia l’elemento sorgente della risorsa da copiare che quello destinato alla sua gestione; per fare un esempio, questo potrebbe essere l’elemento (un campo di input) dal quale copiare una determinata stringa (target) che, nel caso specifico, è un URL:

<input id="blah" value="http://blog.mrwebmaster.it">

mentre l’elemento per la gestione del testo copiato potrebbe essere il pulsante (trigger) qui definito:

<button class="btn" data-clipboard-target="#blah">
    <img src="img/button.svg" alt="Copia negli appunti">
</button>

Il funzionamento dello script è quindi molto semplice, infatti l’identificatore #blah funge da riferimento per clipboard.js e una volta premuto il button associato al selettore btn l’URL contenuta nel campo di input diventerà disponibile anche negli appunti. Ma trigger e target non dovranno essere necessariamente due elementi distinti, motivo per il quale sarà possibile ricomprendere il primo all’interno del secondo, definendo di fatto soltanto il trigger:

<button class="btn" data-clipboard-text="Questo è il testo da copiare negli appunti">
    Copia negli appunti
</button>

Come è possibile notare, la sola presenza del trigger permetterà di non dover definire un identificatore che faccia da riferimento per il target, si noti però come il testo da copiare debba essere introdotto tramite l’attributo data-clipboard-text.

Via Clipboard.js

Post correlati
I più letti del mese
Tematiche