Swapping input field placeholder text with jQuery

Zach Waugh • July 19, 2008

Here is a quick and easy way to handle swapping placeholder text in an input field with jQuery. This is typically used when you have a text box where the design does not allow enough room for a label element to describe the purpose of the field. In this case, like a global search box, the input field is pre-populated with a descriptive text such as "Search". When the user clicks the field, "Search" is removed, so the field is empty and ready for input. When the field loses focus, "Search" is replaced if the user hasn't typed anything. This is best seen with an example. The following text box illustrates how it works. Try clicking in and out of the box.

And the jQuery code: (for jQuery 1.3 or later)

$(document).ready(function() { 
  $('input[type=text]').focus(function() { 
    if ($(this).val() == $(this).attr('defaultValue')) {
      $(this).val('');
    }
  });
  
  $('input[type=text]').blur(function() {
    if ($(this).val() == '') {
      $(this).val($(this).attr('defaultValue'));
    } 
  });
}); 

Works in IE6, IE7, FF2, FF3, and Safari.