placeholder_behavior.js

// To get this code to work, simply add a placeholder attribute to any of your inputs.
// This code requires no-conflict jQuery (var $j = jQuery.noConflict();) and Modernizr. 
// Also you should add something similar to the following to your stylesheets.
// 
// .placeholder{
//   color: #666;
// }

jQuery.fn.set_placeholder = function() {
  if ($j(this).attr('placeholder') && ($j(this).val() == '' || $j(this).val() == $j(this).attr('placeholder'))) {
    $j(this).addClass('placeholder');
    $j(this).val($j(this).attr('placeholder'));
  } else {
    $j(this).removeClass('placeholder');
  }
}

jQuery.fn.clear_placeholder = function() {
  $j(this).removeClass('placeholder');
  if ($j(this).val() == $j(this).attr('placeholder')) {
    $j(this).val('');
  }
}

var placeholder_behavior = Behavior.create(
  {
    initialize: function(event) { $j(this.element).set_placeholder() },
    onblur:     function(event) { $j(this.element).set_placeholder() },
    onfocus:    function(event) { $j(this.element).clear_placeholder() }
  }
);

if (!Modernizr.input.placeholder) {
  Event.addBehavior({
    '[placeholder]'                                 : placeholder_behavior,
    'form:submit'                                   : function() { $j('.placeholder').clear_placeholder() }
  })
}