jquery.inlinelabels.js

(function($){
  $.fn.inlineLabels = function(options){
    var self = this; // scope..
    this.labelElements = this.find("input:text, textarea")

    var settings = $.extend({
      suffix: '...'
    }, options)

    this.labelElements.each(function(i, input){
      var input = $(input)
      var label = input.prev('label')
      var labelText = label.html()
      input.data('labelText', labelText + settings.suffix)

      label.remove()

      // Firefox leaves the values there on reloads/backs, so we gotta check for the actual text
      // as well as blank fields
      if (input.val() == "" || input.val() == input.data('labelText')) {
        input.val(input.data('labelText'))
        input.addClass('label')
      }

      input.focus(function(){
        input.removeClass('label')
        if (input.val() == input.data('labelText')) { input.val('') }
      })

      input.blur(function(){
        if (input.val() == "") {
          input.addClass('label')
          input.val(input.data('labelText'))
        }
      })
    })

    // Re-adding the labels on ajax requests
    this.ajaxComplete(function(){
      self.labelElements.trigger("blur")
    })

    this.submit(function(){
      var form = $(this)
      form.find('input:text, textarea').each(function(i, input){
        var input = $(input)
        if (input.val() == input.data('labelText')) {
          input.val('')
        }
      })
    })
  }
})(jQuery)