Mark the text in the text area with a click and set it to readonly

Icon ask Sir Apfelot

Sometimes you have the case that you want to provide a reader with a piece of code in an article that they can copy and paste. In order to make the whole thing safer and more comfortable, I was looking for a way that on the one hand prevents you from changing the text in the text field and on the other hand marks the text completely when you click in the text field. I've seen that before with Google Analytics or Google Adsense, for example when you want to copy a code out of there. The entire content of the text area field is simply marked with a script and can thus be adopted without forgetting any part.

In practice, write protection is removed in the text area with the addition readonly = "readonly" in the textarea tag. This looks like this, for example:

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

The thing with the automatic marking of the text field content can be done very easily with the addition onclick = "this.select ();" to solve. If you also include this in our example code, it looks like this:

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

Works wonderfully and is very easy to implement. Here you can see the example in action:

-

Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership or at Patreon would support.

Leave a Comment

Your e-mail address will not be published.