codeNothing? Web Development from a Beginner

Simple watermark provides an Unobtrusive, light-weight plugin for better form UI. It takes the information within the title tag of any textbox or textarea, and uses it as a watermark for the element.

No images are needed, just use a single CSS class to style how the text will look inside the box while not in use. The text will be removed before the form submits, so there is no worry of unwanted values being passed. Check it out for yourself:

$(document).ready(function(){
	$('input[type=text]').simpleWaterMark('watermark');
});

Simple Text Field:

This plugin defaults to the native placeholder attribute as defined in the HTML5 specification. So for users who have HTML5 capable browsers, they will get the native browser implementation, instead of this slow javascript version.

Take a look at the source code below, as well as the example package at the bottom to play with it yourself.

/*
 * Simple Watermark 1.1
 * April 19, 2010
 * Corey Hart @ http://www.codenothing.com
 */
(function( $, window ){

	// Because IE adds the placeholder attribute to Elements that have it set in the DOM,
	// we need to create a list of possible use elements and store their default placeholder
	// handling
	var placeholder = {
		input: 'placeholder' in document.createElement( 'input' ),
		textarea: 'placeholder' in document.createElement( 'textarea' )
	};

	// @mainCSS: Default CSS class used if no metadata found
	$.fn.simpleWaterMark = function( mainCSS ){
		return this.each(function(){
			var self = this,
				$input = $( self ),
				title = self.getAttribute( 'title' ),
				inplace = self.getAttribute( 'placeholder' ),
				useinplace = !!( inplace && inplace !== '' ),
				css = $.metadata ? $input.metadata().watermark : mainCSS;

			// Prevent watermark initialization on elements that already have it
			if ( $.data( self, 'simple-watermark' ) === true ) {
				return;
			}
			$.data( self, 'simple-watermark', true );

			// Clear out the title first (so html5 capable browser don't have it lingering)
			if ( $.fn.simpleWaterMark.removeTitle === true ) {
				self.removeAttribute( 'title' );
			}

			// If browser is HTML5 compatible, use native placeholder
			if ( $.fn.simpleWaterMark.HTML5 === true && placeholder[ self.nodeName.toLowerCase() ] ) {
				if ( ! useinplace ) {
					self.placeholder = title;
				}
				return;
			} 

			// Use the placeholder attribute, devs can just set that instead of the title attribute
			if ( useinplace ) {
				title = inplace;
			}

			// Add watermark to begin with
			if ( $input.val() === '' && title && title !== '') {
				$input.addClass( css ).val( title );
			}

			$input.bind({
				'focus.simple-watermark': function(){
					if ( $input.hasClass( css ) ) {
						$input.removeClass( css ).val('');
					}
				},

				'blur.simple-watermark': function(){
					if ( $input.val() === '' && title && title !== '' ) {
						$input.addClass( css ).val( title );
					}
				}
			})
			.closest('form').bind( 'submit.simple-watermark', function(){
				if ( $input.hasClass( css ) ) {
					$input.val('');
				}
			});

			// Clear fields on page unload
			$( window ).bind( 'unload.simple-watermark', function(){
				$input.val('');
			});
		});
	};

	// Tell the plugin to use native HTML5 placeholder attribute instead if available
	$.fn.simpleWaterMark.HTML5 = true;

	// Remove the title attribute after events are bound (so it doesn't pop up on hover)
	$.fn.simpleWaterMark.removeTitle = true;

})( jQuery, window );