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 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.