Archivio per il tag javascript

Come implementare la copia del testo usando Javascript + Flash (cross browser)

pubblicato
da
gialloporpora
il 8 Maggio 2008
in web
. 1 Commento

Vediamo come è possibile implementare una funzione per la copia automatica in clipboard del contenuto di una stringa, la cosa può tornare utile per far selezionare direttamente all’utente delle parti di testo e copiarlo senza dover usare la combinazione CTRL-C. A me è servita solo per aggiornare il mio userscript che inserisce il codice HTML valido nelle pagine di Youtube, in questo modo basta selezionare il box dove si trova il codice ed incollarlo sul proprio editor HTML :-) , any suggestions about errors in my poor english are greatly appreciated :-D

Usando Javascript la cosa non è possibile, molti browser infatti, impediscono, per ragioni di sicurezza, l’accesso alla clipboard via Javascript. Se ci si limitasse ad IE invece, sarebbe possibile ottenere la cosa utilizzando il solo Javascript, se si vuole invece fare una cosa cross-browser è necessario utilizzare uno script in Flash. Tutto sommato Flash è i plugin più popolare, molto probabilmente la maggioranza degli utenti lo ha installato e quindi non ci dovrebbero essere grossi problemi.

Logo di Adobe Flash

Qui di seguito riporto la tecnica da usare per implementare la funzione copyToClipboard e il metodo di utilizzo, la funzione è leggermente modificata rispetto all’originale, queste sono le modifiche che ho apportato:

  • rimossa la parte di codice relativa a IE (che permette di suo di inviare testo alla clipboard), dovrebbe comunque funzionare se il plugin Flash è installato (io non ho il plugin di Flash in IE, quindi servirebbe verificarlo :-P );
  • l’originale permetteva solo la copia di testo inserito all’interno di tag INPUT (accettava l’oggetto come parametro), la mia versione invece accetta una stringa come input :-) ;

La funzione originale è possibile l’abbiate vista all’opera su Photobucket o su Urltea (prima di capire che sfruttava Flash avevo una mezza idea di aprire un bug su Bugzilla :-P ), quella modificata la potete vedere all’opera su questa pagina selezionando il codice della funzione inserito nel tag PRE (ho preparato una pagina a parte perchè non voglio caricare lo script sulla pagina del post).

Innanzitutto, bisogna scaricare il file _clipboard.swf, che potete trovare al link inserito a fine post. Il file è distribuito con licenza GPL (non da me ma dall’autore), quindi lo potete usare come meglio credete :-) .

I’ve uploaded the SWF file that you can use in your own webpage.

This software is licensed under the GPL so you can take this solution, change it, whatever, free.

Una volta uploadato il file _clipboard.swf sul vostro spazio Web (non usate quello caricato sul mio server, grazie!) inserite il percorso del file nella variabile clipboardswfpath e richiamate la funzione all’interno della pagina in cui desiderate utilizzarla passandogli come argomento una stringa che verrà copiata nella clipboard del visitatore.

copyToClipboard(document.getElementById('input_id').value);

per un tag PRE (e probabilmente per quasi tutti gli altri):

oggetto=document.getElementById('id_tag_pre');
range = document.createRange();
range.selectNodeContents(oggetto);
copyToClipboard(range);

per IE usate getElementById(’mypre_id’).innerText.
Ecco la funzione:


function copyToClipboard(texttocopy)
{
	  var clipboardswfpath="indirizzo_file_SWF";
	var flashcopier = 'flashcopier';
	if(!document.getElementById(flashcopier)) {
		var divholder = document.createElement('div');
		divholder.id = flashcopier;
			document.body.appendChild(divholder);
    }
	document.getElementById(flashcopier).innerHTML = '';
	var divinfo = '<embed src="'+clipboardswfpath+'"  FlashVars="clipboard='+encodeURIComponent(texttocopy)+'" width="0" height="0"></embed>';
	document.getElementById(flashcopier).innerHTML = divinfo;
}

Purtroppo non è possibile, come da suggerimento che ho avuto su userscript.org inserire il file SWF come stringa di caratteri usando un data link, al momento i browser non supportano.

Come piccola considerazione finale, vorrei far notare a tutti quanto possa influenzare la “sicurezza” di un browser l’utilizzo di un plugin. Se, escludendo IE, nessun altro browser si fida a dare accesso in scrittura alla clipboard un motivo deve pur esserci, il fatto che avendo il plugin Flash installato si possa “raggirare” questa restrizione dovrebbe far riflettere. Certo, poter accedere alla clipboard permette alle applicazioni Web maggiori funzionalità ma a discapito, forse, della sicurezza. Rassicuro tutti, dicendo che nemmeno Flash dà accesso alla clipboard in lettura :-P .

Ringrazio ssjx/Engelium che mi ha fatto interessare all’argomento :-)

Fonte: Clipboard Copy.

Technorati Tags: , , ,

Ti è piaciuto l'articolo? Vota Ok oppure No. Grazie Mille!

Puoi votare l'articolo anche qui, gli articoli precedenti qui.

Selezionare il codice inserito quando ci si clicca sopra

pubblicato
da
gialloporpora
il 1 Aprile 2008
in blog
. 6 Commenti

Da quando ho iniziato a scrivere sul blog mi sono sempre trovato in difficoltà con l’inserimento di codice, avevo cominciato mettendolo nelle textarea - cosa ignobile da fare col senno di poi - in modo da non rovinare il layout quando nel codice le parole erano troppo lunghe e non venivano wrappate correttamente. Successivamente mi son letto un po’ di manuali base di CSS e ho finalmente capito che il metodo migliore è inserirlo all’interno del tag PRE, assicurandosi di definire uno stile che tenga conto dell’overflow e non faccia sballare troppo la pagina.

Questo è lo stile che uso io:

pre {
	font-family: Courier,monospace;
	background: #EEE;
	font-size: 1.1em;
	line-height: 1.1em;
	border: dashed #666 1px;
	padding: 15px 20px 15px 20px;
	overflow: auto;
}

In particolare la riga:

overflow: auto;

serve per “nascondere” le righe troppo lunghe (è facile accorgersene perchè appariranno le scrollbar). Il fonte tutto Il resto è modificabile a piacimento. Io uso un font monospace come il Courier ma è possibile opti per un altro tipo di carattere in futuro.

Un’altra cosa che mi è sempre piaciuta è fare in modo che il codice inserito sia automaticamente selezionato quando ci si clicca sopra, cosa che devo aver visto su qualche blog di cui non ricordo l’indirizzo. Cercando un po’ con Google sono finalmente riuscito a trovare una risposta :-) . Per fare in modo che il codice venga automaticamente selezionato è necessario associare all’azione onClick dell’elemento un po’ di codice Javascript.

Ecco quindi cosa aggiungere al tag PRE per selezionare automaticamente il testo in esso contenuto:

<pre onClick="
if (window.getSelection) {
	var sel = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(this);
	sel.removeAllRanges();
	sel.addRange(range);
}
else // per colpa di IE serve un if
	document.selection.empty();
	var range = document.body.createTextRange();
	range.moveToElementText(this);
	range.select();
}
“>
codice
</pre>

(gli a capo sono messi solo per motivi di visualizzazione)

Come al solito per farlo funzionare anche con IE è necessario scrivere codice aggiuntivo :-P Naturalmente è possibile associare il codice anche a tag diversi dal PRE, mentre per i tag INPUT e TEXTAREA si deve modificare un po’ il codice utilizzato.

Naturalmente io aggiungo quel codice automaticamente usando un programmino di text & replace (praticamente scrivo pre seguito da TAB), è comunque possibile aggiungere uno script alla pagina e richiamare il codice nel seguente modo:

<pre onClick="autoSelect(this);">
codice
</pre>

Per il codice della funzione autoSelect vi rimando all’articolo da cui ho scopiazzato il codice :-) .

Nel mio caso, non inserendo codice così spesso, preferisco far risparmiare al browser il caricamento di una funzione Javascript inutilizzata nella maggior parte delle pagine. Per lo stesso motivo, non credo di sovvracaricare ulteriormente il blog con uno script di syntax hightlighting

Technorati Tags: , ,