Come copiare un testo negli appunti utilizzando JavaScript? Oppure, per dirla con il termine tecnico inglese, come eseguire un copy to clipboard con JavaScript?
Inserire un pulsante per effettuare il copy to clipboard in una pagina Web negli appunti del proprio sistema è un’operazione relativamente semplice, soprattutto ora che il metodo JavaScript execCommand() è supportato dalla maggior parte dei browser Internet più utilizzati.
Vedremo quindi a cosa serve questo costrutto e come utilizzarlo per i nostri progetti.
Copy to clipboard in puro Javascript
In pratica execCommand() è un metodo che consente di attivare delle istruzioni per la manipolazione dei contenuti di un’area o componente di pagina editabile; queste istruzioni possono coinvolgere un elemento selezionato, ad esempio una stringa delimitata da tag, inserire un ulteriore elemento, ad esempio un link, o isolare un’intera linea di codice sulla base della sua indentazione.
E’ possibile utilizzare execCommand() in associazione con diversi metodi, nel caso del nostro script faremo riferimento a querySelector()che ha il compito di restituire il primo elemento che corrisponde ad uno specifico selettore CSS; si differenzia quindi da querySelectorAll() che invece restituisce tutti gli elementi che corrispondono ad un determinato selettore.
Partiremo quindi con la creazione di una semplice pagina HTML contenete un campo di input e il pulsante per attivare il comando di copia:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Copiare un testo negli appunti con JavaScript</title>
</head>
<body>
<div class="myinput">
<h1>Premi il pulsante e copia il testo</h1>
<input type="text" id="testo-da-copiare" value="Blah! Blah! Blah!"/>
<input type="button" id="pulsante-da-premere" value="Copia negli appunti">
</div>
</body>
</html>Ora passiamo al codice JavaScript:
document.querySelector("#pulsante-da-premere").onclick = function() {
// selezione del contenuto
document.querySelector("#testo-da-copiare").select();
// copia negli appunti
document.execCommand('copy');
};In sostanza il comando copy() ha il compito di copiare la selezione corrente (cioè quella che nel nostro esempio viene identificata dal metodo querySelector()) negli appunti del sistema utilizzato. In alternativa è possibile utilizzare anche cut(), un comando che oltre a copiare la porzione di contenuto selezionata la taglia, esattamente come accade con il menù contestuale attivato dal tasto destro del mouse.
Attenzione: affinché lo script funzioni correttamente è necessario inserirlo subito prima della chiusura del tag body.
Utilizzare ZeroClipboard
Come abbiamo appena visto la fuznione copy to clipboard può essere realizzata con un po’ di Javascript tuttavia, a causa delle impostazioni di sicurezza di alcuni browser, non ne è sempre garantita una piena funzionalità. Al fine di ovviare a questo inconveniente è possibile ricorrere a delle librerie ad hoc come, ad esempio, ZeroClipboard. Quest’ultima riesce a bypassare i sopracitati problemi facendo ricorso ad un geniale miscuglio di Javascript e Flash.
Per implementare la funzionalità di “copia negli appunti” è necessario, ovviamente, scaricare la libreria ed includerla nella pagina web.
<script type="text/javascript" src="ZeroClipboard.js"></script>Fatto questo si predisponga una textarea contenente il testo da copiare:
<textarea name="copiami" id="copiami" rows="5" cols="70">
Questo è il testo da copiare...
</textarea>
<p><input type="button" id="copiatesto" name="copiatesto" value="Copy to Clipboard" /></p>e si accodi questo codice javascript:
<script>
// definisco la URL del file SWF
ZeroClipboard.setMoviePath('http://www.miosito.com/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.addEventListener('mousedown',function() {
clip.setText(document.getElementById('copiami').value);
});
clip.addEventListener('complete',function(client,text) {
alert('copiato:\n\n' + text);
});
// attivo la funzione al click sul bottone con ID "copiatesto"
clip.glue('copiatesto');
</script>Il gioco è fatto. A questa pagina potete vedere una demo funzionante.
Utilizzare 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.
A differenza di ZeroClipboard, questa libreria non utilizza componenti Flash o altri sistemi “non standard” ma implementa tutto in puro Javascript, garantendo quindi la massima compatibilità cross-browser.
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="https://www.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
