Evidenzia il testo nell'area di testo quando fai clic e impostalo in sola lettura

Ci sono momenti in cui vuoi fornire a un lettore un pezzo di codice in un articolo che può copiare e incollare. Per rendere il tutto più sicuro e confortevole, stavo cercando un modo che da un lato ti impedisca di poter modificare il testo nel campo di testo e dall'altro selezioni completamente il testo quando fai clic nel campo di testo. L'ho visto più spesso con Google Analytics o Google Adsense, ad esempio se vuoi copiare un codice da lì. Il contenuto completo del campo dell'area di testo è semplicemente contrassegnato da uno script e può essere accettato senza dimenticarne una parte.

In pratica, la protezione da scrittura nell'area di testo viene rimossa con l'aggiunta readonly="sola lettura" nel tag area di testo. Questo quindi appare così, ad esempio:

<textarea readonly="readonly" cols="14" rows="4">Text für den Schreibschutz</textarea>

La funzione di contrassegnare automaticamente il contenuto del campo di testo può essere eseguita molto facilmente con l'aggiunta onclick="this.select();" risolvere. Se lo aggiungi al nostro codice di esempio, apparirà così:

<textarea readonly="readonly" onclick="this.select();" cols="14" rows="4">Text für den Schreibschutz</textarea>

Funziona benissimo ed è molto facile da implementare. Qui puoi vedere l'esempio in azione:

Jen Kleinholz( Fondatore e Sir Apfelot )

Jens gestisce il blog dal 2012. Agisce come Sir Apfelot per i suoi lettori e li aiuta con problemi di natura tecnica. Nel tempo libero guida monocicli elettrici, scatta foto (preferibilmente con l'iPhone, ovviamente), si arrampica sulle montagne dell'Assia o fa escursioni con la famiglia. I suoi articoli trattano di prodotti Apple, notizie dal mondo dei droni o soluzioni ai bug attuali.