Corsi on-line

Javascript: Copy to Clipboard (copia negli appunti)

Un’interessante funzionalità che capita spesso di vedere in siti tecnici è quella che consente di salvare automaticamente un testo all’interno della clipboard al fine di poterlo poi utilizzare mediante la funzione “incolla” (questa funzionalità è molto comoda, ad esempio, per copiare facilmente codici di esempio come quelli che proponiamo sulle pagine di questo blog).
La fuznione in oggetto – nota in inglese come copy to clipboard (in italiano: copia negli appunti) – può essere realizzata in Javascript tuttavia, a causa delle impostazioni di sicurezza di alcuni browser, non ne è garantita una piena funzionalità.
Al fine di ovviare a questo inconveniente è possibile ricorrere alla libreria ZeroClipboard che 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 type="text/javascript">
// 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.

Post correlati
I più letti del mese
Tematiche