jquery.placeholder.js

/*
 * jQuery placeholder Plugin
 * version: 0.1
 * @requires: jQuery v1.4.1 or later, Modernizr, and jquery livequery plugin
 *
 * http://docs.jquery.com/Plugins/livequery
 * 
 * To use: When you write your input tags, include a title and placeholder attribute as
 * well as a placeholder class. Also include styling for the hasPlaceholder class.
 *
 * E.g.: 
 * CSS:
 * .hasPlaceholder { color: #ddd; font-style: italic; }
 *
 * <input type="text" class="placeholder" title="Username" placeholder="Username" name="username">
 */
 if (!Modernizr.input.placeholder) {
  $(function() {

    var blurInputs = function (selector) {
      selector.each(function () {
        var trimmedTitle = $.trim(this.title), trimmedValue = $.trim(this.value);
        if (trimmedTitle !== '' && (trimmedValue === '' || trimmedValue == trimmedTitle)) {
          this.value = this.title;
          $(this).addClass('hasPlaceholder');
        }
      });
    };

    $(':text.placeholder')
      .livequery(function () {
        blurInputs($(this));
      })
      .live('focus', function () {
        if ($.trim(this.title) !== '' && $.trim(this.value) === $.trim(this.title)) {
          this.value = '';
          $(this).removeClass('hasPlaceholder');
        }
      })
      .live('blur', function () {
        blurInputs($(this));
      });

    $("form").live("submit", function () {
      $(this).find(':text.hasPlaceholder').val('');
    });
  });
}