Follow kevinlearynet on Twitter!

kevinleary.net

Form Input Default Values With The jQuery valueFx() Plugin

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.

XHTML

<input id="email" class="valueFx" name="email" type="text" value="you@domain.com" />

JavaScript / jQuery Plugin

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

Simple Usage

$('input.valueFx').valueFx();

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 &gt; 0) {
	$.getScript('/path/to/jquery.valueFx.js',function(){
		$('input.valueFx').valueFx();
	});
}

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.

Download

jQuery Value Effects Plugin

Resources

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

5 Comments

  1. Marko Randjelovic / 7.25.09 / 5:06 PM

    Thank you! :) I've just added focus & blur effects to the comment form on a WordPress theme I'm developing for my website.

    Thanks! :D

  2. kevinlearynet / 7.27.09 / 12:30 AM

    No problem Marko, was it easy enough to set up? Did you encounter any problems along the way?

  3. Marko Randjelovic / 7.27.09 / 10:11 AM

    Yeah, it was quite easy, no problems setting it up. Although, I don't know how to make it work for the textarea field, like in your comment form. :) Also, after entering my name in a field and moving to the next input field, the field shrinks from its original size. I didn't think it had anything to do with your plugin, but I've tried disabling the plugin just now and it doesn't shrink anymore. I can't think of a reason why it's happening.
    I have another problem, but it's not with your plugin, it's with WordPress. I've added the valueFx class to the input fields and it works properly but when I add the <?php echo $comment_author; ?> function to the end of the value attribute like this:
    value="Name <?php if ($req) echo "(required)"; ?> <?php echo $comment_author; ?>"
    things get complicated. After adding a comment, the fields now contain both the default value and a name, for example. But it works on your site. :) How did you get around it? Using an IF statement?

    Thanks!

  4. kevinlearynet / 7.28.09 / 12:07 AM

    Hey Marko,

    I'm actually using a system called IntenseDebate to manage my comments; so I didn't actually develop the comment system you see here, Automattic did, so I can't answer your questions about integrating it with the WordPress forms.

    Can you send me a demo to where the input fields are shrinking? I'd love to help.

  5. Marko Randjelovic / 7.28.09 / 9:31 AM

    Hi Kevin,

    I see, I'll check it out. About the demo, I'll upload the site and send you the link through your contact form. I'm not sure I'll have the time today to set up a test site. If not, I'll do it tomorrow.

    Thank you so much for your time and willingness to help me out. :)

Leave a comment

will not be published

Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where LANGUAGE is a GeSHi supported language syntax.