Auto-highlight an input field on focus Auto-highlight an input field on focus jquery jquery

Auto-highlight an input field on focus


<input type="text" name="textbox" value="Test" onclick="this.select()" />


You could attach javascript to the click event to select the text like so:

$(document).ready( function() {  $('#id').click( function( event_details ) {    $(this).select();  });});

There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.

jQuery event documentation:http://api.jquery.com/category/events/


Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:

<input type="text" value="Test1" onclick="this.select()" />

Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:

<input type="text" value="Test2" onfocus="this.select()" />

Here is an example of both inputs in action.