jquery.inlinelabels.js

(function($){
	$.fn.inlineLabels = function(options){
		var settings = $.extend({
			suffix: '...'
		}, options)
		
		var inputs = this.find('input[type=text]')
		inputs.data('labelText', inputs.prev('label'))
		
		this.find('input[type=text]').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'))
				}
			})
		})
		
		this.submit(function(){
			var form = $(this)
			form.find('input[type=text]').each(function(i, input){
				var input = $(input)
				if (input.val() == input.data('labelText')) {
					input.val('')
				}
			})
		})
	}
})(jQuery)