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 )

Jens betreibt das Blog seit 2012. Er tritt für seine Leser als Sir Apfelot auf und hilft ihnen bei Problemen technischer Natur. Er fährt in seiner Freizeit elektrische Einräder, fotografiert (natürlich am liebsten mit dem iPhone), klettert in den hessischen Bergen rum oder wandert mit der Familie. Seine Artikel beschäftigen sich mit Apple Produkten, Neuigkeiten aus der Welt der Drohnen oder mit Lösungen für aktuelle Bugs.