Form Input Default Values With The jQuery valueFx() Plugin
- Share /
- jQuery / 9.9.08 / 5 Comments / /
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 > 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.
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
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?
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!
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.
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. :)