Text in Textarea bei Klick markieren und auf readonly stellen

Manchmal hat man ja den Fall, dass man einem Leser in einem Artikel ein Stückchen Code zur Verfügung stellen möchte, den er kopieren und einfügen kann. Um das ganze sicherer und komfortabler zu machen, habe ich nach einem Weg gesucht, der zum einen verhindert, dass man den Text im Textfeld verändern kann und zum anderen den Text bei einem Klick ins Textfeld komplett markiert. Das habe ich schon häufiger bei Google-Analytics oder Google-Adsense gesehen, wenn man zum Beispiel einen Code dort rauskopieren möchte. Dabei wird per Skript einfach der komplette Inhalt des Textarea-Feldes markiert und kann so ohne, dass man einen Teil vergißt, übernommen werden.

In der Praxis löst man den Schreibschutz im Textarea mit dem Zusatz readonly=“readonly“ im Textarea-Tag. Dies sieht dann zum Beispiel so aus:

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

Die Sache mit dem automatischen Markieren des Textfeld-Inhalts kann man sehr einfach mit dem Zusatz onclick=“this.select();“ lösen. Wenn man das auch noch in unseren Beispielcode übernimmt, sieht es dann so aus:

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

Funktioniert wunderbar und ist sehr einfach umzusetzen. Hier könnt ihr das Beispiel im Einsatz sehen:

Jens Kleinholz( Gründer & Sir Apfelot )

Seit 2012 betreibe ich meinen Blog als Sir Apfelot und helfe meinen Lesern bei technischen Problemen. In meiner Freizeit flitze ich auf elektrischen Einrädern, fotografiere mit meinem iPhone, klettere in den hessischen Bergen oder wandere mit meiner Familie. Meine Artikel behandeln Apple-Produkte, Drohnen-News und Lösungen für aktuelle Bugs.