One of the most useful thing on forms is an “autoselect” function. How is this work? Let’s assume that you have a standard search box:
![]()
When textbox is focused you can do three things:
- Do nothing. Let the user to delete all text. Not good for lazy people, right?
- Autoclear box. But if user want only to change a letter (typo) or add another word, then he should re-type all things. Not good for usability.
- Autoselect box content. Is just like the user double clicks on the text. How can you do this? Read further to see
var initValue;
$(document).ready(function(){
$(':text').each(function(){
$(this).focus(function(){
initValue = $(this).attr('value');
$(this).select();
});
$(this).blur(function(){
if($(this).val() == ''){
$(this).val(initValue);
}
});
});
});
What is the best thing with this? Well… If an user just leave the text box blank, that form is auto filled with previous value.
Pretty nice, huh? Well… I think is pretty useful too