tomhubbardgreen.co.uk Ads, social media, games, design & technology

Tutorial: how to create text boxes with the content automatically selected

If you need your audience to copy a specific bit of text or a URL you’re going to want to make it as simple for them as possible. A great way of doing this is to create a text box that automatically highlights the contents when a user clicks on it. This is easy to achieve with a just a few lines of JavaScript.

First of all you want to create your text box. This can be easily styled with CSS for this example we’ll just use a plain box with a size of 2 rows and 40 columns. The code you’ll need is:

<textarea rows="2" cols="40" name="share">
This text will be automatically highlighted when you click on the box
</textarea>

This creates the text area and the content but it isn’t automatically selected when you click in the box. To do that you just need to add a few bits of JavaScript:

<textarea rows="2" cols="40" name="share" onclick="this.focus();this.select()">
This text will be automatically highlighted when you click on the box
</textarea>

By adding onclick="this.focus();this.select()" the content inside the text area will now be automatically highlighted when you click in the box.