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:

Meine Tipps & Tricks rund um Technik & Apple

Hat dir der Artikel gefallen und helfen dir die Anleitungen im Blog? Dann würde ich mich freuen, wenn du das Blog über eine Steady-Mitgliedschaft unterstützen würdest.

Kommentar verfassen

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

Im Sir Apfelot Blog findest du Ratgeber, Anleitungen und Testberichte zu Apple Produkten wie iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini und Mac Studio.

Specials
Shopping
  •  
  •  

Meine Tipps & Tricks rund um Technik & Apple