focusMagic jQuery Plugin
This plugin is meant to expedite the basic process of making form fields empty or clear on focus and refill on blur, depending on a few specs… a watermark. The three different scenarios that I have built for are represented.
- A normal form field watermark that empties on focus and refills on blur.
- A value that is set by the server trumps anything that the plugin does. (Note: this way, if a user has to fill out the form again because one of the fields didn’t validate, the server can send values so that the user doesn’t have to refill the whole form)
- There may be a time when you want to ignore the plugin and keep your label visible. Just add a ‘ignore’ class to your label and the plugin doesn’t touch it.
- This is an extra couple of lines written so that validation works correctly. What it does is it empties the fields that have not been touched by the user on submit. That way, we can run our validation against those fields, and we don’t submit our label.
This solution focuses on accessibility as it does not remove the label, just moves it off the viewport. This way, if a user does not have Javascript, CSS, or uses a screen reader, they will still get normal labels.
View a demo
Download plugin (link to jQuery plugins)
Please let me know what you think about it, or if there is anything I should do to improve.
December 28th, 2009 at 4:40 am
Simply want to say your article is astounding. The clearness in your post is simply impressive and i can take for granted you are an expert on this subject. Well with your permission allow me to grab your rss feed to keep up to date with future post. Thanks a million and please keep up the strong work.
February 7th, 2010 at 1:50 pm
I was searching for photography when I found your site. Great post. Thank You.
March 24th, 2010 at 5:27 am
The only snag I have is when you combine this with the jQuery validation plugin.
When you click submit, because the (lets say for example) the forename and surname fields have been filled in by focus magic and they also have a required attribute in the validation plugin, then they do get validated even though they are the label values from FM..
Is there any way that you know of that will remove the FM values just before validation?
Thanks
March 24th, 2010 at 9:39 am
Hi Martin,
I will look into this and get back to you. This is one of the plugins that I use on almost every project so it would definitely be beneficial for me to update it.
Check back here for the update. Here is a feed for the comments of this post.
http://feeds.feedburner.com/CommentsOnFocusmagicJqueryPlugin
Hold tight.
March 24th, 2010 at 10:13 am
Alright. I have updated the plugin. You can download it at the jquery plugins site from now on:
http://plugins.jquery.com/project/focusmagic
You can also see it in action at the demo site:
http://www.aaronvanderzwan.com/focusmagic/
Try this out with your validation and let me know if you need any other changes.
Thanks.
March 24th, 2010 at 11:09 am
Wow, that was quick Aaron – Thank you so much for this!
Kind regards
Martin