Clear a field on focus

03 Feb 2009

It’s the little enhancements that count, right? – This jQuery plugin will clear the default value from a field when it’s focused and will bring it back when it’s blurred (if it’s empty):

$.fn.clearOnFocus

$.fn.clearOnFocus = function(){
 
    /* No attribution required,
       don't use excessively */
 
    return this.focus(function(){
        var v = $(this).val();
        $(this).val( v === this.defaultValue ? '' : v );
    }).blur(function(){
        var v = $(this).val();
        $(this).val( v.match(/^s+$|^$/) ? this.defaultValue : v );
    });
 
};

Usage

$('input').clearOnFocus();

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

So far there's been 3 Responses to
“Clear a field on focus”

Santiago February 3rd, 2009 at 5:25 pm

Why don’t use excessively? Can make the page slow?

Ionut Staicu February 3rd, 2009 at 6:03 pm

I wrote something similar sometime ago here. Is not a plugin tho 😀

James February 3rd, 2009 at 7:53 pm

@Santiago, No, it won’t slow down a page. I only put that there in case someone was thinking they could use it for all their forms. This enhancement should only really be used for short forms (contact pages, search forms etc.). If you’ve got a long registration form for example, you should use regular labels instead of default values.

@Ionut, Nice work! 🙂 I didn’t know that $.fn.select() did that!

Clear a field on focus

$.fn.clearOnFocus

Usage

So far there's been 3 Responses to “Clear a field on focus”

So far there's been 3 Responses to
“Clear a field on focus”