Alex-Fu.com

jquery.watermark.js

Tags: javascript jquery plugin watermark input ui dom forms Posted: Sep 11, 2009

I recently had to watermark some input areas (meaning, they have default text until they're focused). I noticed the default plugin from a quick search on Google to do this with jQuery was kinda of weak. Lots of unnecessary bits, seems limited to text input tags, creates unnecessary DOM elements.. and even seems to require the elements to have id attributes.

So here's my quick solution.

Code:

(function($){
	$.fn.watermark = function(options) {
		return $(this).each(
			function () {
				$(this)
					.attr({'watermarkText' : options['text']})
					.focus(function () { 
						if ($(this).val() == options['text']) {
							$(this)
								.removeClass(options['class'] || 'watermark')
								.val('');
						}})
					.blur(function () { 
						if ($(this).val() == '') {
							$(this)
								.addClass(options['class'] || 'watermark')
								.val(options['text']);
						}})
					.addClass(options['class'] || 'watermark')
					.val(options['text']);
			});
	}
})(jQuery);

Usage is ridiculously easy. It takes an object as it's only argument, and looks for keys text and class if the class isn't set it defaults to watermark.

Here's an example.

Code:

$('textarea, input[type="text"], .otherElements')
	.watermark({text:"Enter some text here!"});