Have you ever wanted to provide forms with default values or examples to improve user experience? Here’s how you can do it in an easy, re-usable way using a jQuery plugin called valueFx.

This is a more agile, re-usable version of the Focus & Blur effects I’ve previously posted about. This can be used on as many text <input>’s as you like, simply by adding class=”valueFx” to the tag.

For a better explanation of what this is visit the Search Field Focus & Blur Effects post.


JavaScript / jQuery Plugin

jQuery.fn.valueFx = function() {
	return this.each(function(){
		var $field = $(this);
		var $value = $(this).val();
		var $newVal;	
				if (($value == '') || ($value == $value)) {
					$newVal = $(this).val();
			$newVal = $(this).val();
			if ($newVal == '') {
			} else {

Simple Usage


Above is the easiest way to setup this plugin. Of course, I prefer to add a little more logic to make things more intuitive.

Advanced Usage

if ($('input.valueFx').length > 0) {

What this does is first check to see if there are any input fields in the document that have a class of “valueFx“. If there are, we’ll load in the jquery.valueFx.js file, and run a function once it has been loaded. This function (or callback) runs the valueFx() method on all the input’s that have been found.


jQuery Value Effects Plugin