HOWTO: Automatically Clear/Restore Form Defaults w/jQuery

Just wanted to post this quick trick I've been using lately to automagically hide/show useful default text field values (e.g. "Search" in the search box) using jQuery and the ultra-handy Drupal.settings() object. Here's the short and sweet copy/pastable jQuery code:

 
$(document).ready(function(){   
  Drupal.settings.inputDefaults = {}   
  $("input:text").focus(function() {     
    var element = $(this);     
    Drupal.settings.inputDefaults[element.attr("id")] = element.val();     
    element.val('');   
  });   
  $("input:text").blur(function() {     
    var element = $(this);     
    if (element.val() == '') {
      element.val(Drupal.settings.inputDefaults[element.attr("id")]);
    }
  }); 
}); 

Basically this quick snippit will add a blank array object (ahh, the joys of moving between js and PHP) to the Drupal.settings object -- which is useful for all sorts of great javascript functionality, and is integral to Drupal 6.0's extended AHAH features; if you don't already know it, do your self a favor and study up -- and automatically fill it with any textarea's default values when a user clicks/tabs it into focus. This lets us clear the default value, but replace it quickly if the user moves on to another element.

As listed, you probably don't want this on your site, as it will affect things like editing nodes (e.g. title inputs will go blank when you click on them... not what you necessarily want), but it's easy to tune this to only hit elments within certain forms since every form in Drupal has a unique #id.

Thinking about this, I decided to tune it up and actually make an extended jQuery function for this so it could be more easily applied to speecific elements like so:

 
$(document).ready(function(){
   // handle hide/show for text field default values in only one form
   Drupal.settings.inputDefaults = {};
     $("#specific-form input:text").clearDefaultText();
   });
   jQuery.fn.clearDefaultText = function() {
     return this.each(function(){
       var element = $(this);
       Drupal.settings.inputDefaults[element.attr("id")] = element.val();
       element.focus(function() {
         if (element.val() == Drupal.settings.inputDefaults[element.attr("id")]) {
           element.val('');
         }
       });
     element.blur(function() {
       if (element.val() == '') {
         element.val(Drupal.settings.inputDefaults[element.attr("id")]);
       }
     });
   });
 } 

This is a pretty nice little plugin, I think, and it shows just how easy it can be to add nice/reusable UI functionality. Happy Drupaling, and go get 'em jQuery! (updated w/slight improvement to jQuery fn) (updated again w/object style improvements from comments)