To make text in TextArea selectable onclick of mouse

I am very sure most know about this and is a very simple thing. But as I have found sometimes that small things are the one which are missed.

So wanted a quick note on – How to make the text inside a textarea selectable on mouse click.

Well, we use the Javascript event system
[def: An event in Javascript is something that happens with or on the web page ].

Specifically we use the onclick Event to achieve the above stated goal. onClick applies to buttons (submit, reset, and button), checkboxes, radio buttons, and form upload buttons.

This is how we do it:

<textarea rows="3" cols="43" name="none" onclick="this.select();">This is the text which when clicked on will get selected</textarea>

The main syntactic sugar here is the “onclick=”this.select();”

Here the “this” helps us to access the textarea object and then we fire the DOM event “select()”
dynamically on it, which in turns selects the text inside the textarea.
ciao until next time 🙂