Text in Textarea bei Klick markieren und auf readonly stellen

Icon frag Sir Apfelot

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:

Hinweis: Als Amazon-Partner verdiene ich an qualifizierten Käufen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.