Automatically empty a search box on focus with jQuery

Marc-Antoine Ross April 23rd, 2009 Add comment

This simple Javascript snippet will bind the focus event to any element that has a “clearSearch” css class. On focus, the field is emptied if it is the default value. On blur, it will put back the default value if nothing was entered. Very simple and unobtrusive. You can use it on your registration forms as well!

TAXI.clearField = function() {
    $(’.clearSearch’).bind(’focus’, function(){
        if( this.value == this.defaultValue ) {
            this.value = ”";
        }
    });
    $(’.clearSearch’).bind(’blur’, function(){
        if( !this.value.length ) {
            this.value = this.defaultValue;
        }
    });
};

jQuery Cheat Sheet

Marc-Antoine Ross April 22nd, 2009 Add comment

Research on Agile Project Management Web Tools

Marc-Antoine Ross March 18th, 2009 3 comments

Piria is hiring an advanced OOP PHP5 developer in Montreal

Marc-Antoine Ross January 6th, 2009 Add comment

Country jQuery Autocomplete plugin

Marc-Antoine Ross December 21st, 2008 Add comment

Rombla: a visual website builder

Marc-Antoine Ross November 17th, 2008 Add comment

Apache Caching

Marc-Antoine Ross October 2nd, 2008 Add comment

A Bridge Between AIR and Java

Marc-Antoine Ross July 15th, 2008 Add comment

Save a website on your computer

Mario Laflamme May 22nd, 2008 Add comment

Now That’s Exciting

Marc-Antoine Ross April 24th, 2008 Add comment

Previous Posts