In-Field Labels: A Better Way + jQuery Plugin

Last week I was dealing with a unique problem. I needed to set focus to a username field, but the field had an in-field label. The script was set to clear out the helper text (label) when the user entered the field. Hmm…. that won’t work! I remember seeing a nicer implementation on Mobile Me for their login. Basically the label stays over the input element even after it had focus. Only after typing began did it totally disappear. Inspired by that implementation, today I am releasing the In-Field Labels jQuery Plugin so you can use this new method as well. The plugin is open source and available for download or on Github. If you can make it better, please fork it and send a pull request when you have finished your changes!

Download zipped archiveView the example

Benefits

  • The input element or textarea never really has content, so validation can proceed without first checking for the field value.
  • It uses standard markup for form elements
  • It is under 1KB when minified and gzipped
  • It takes one line of jQuery code to implement.
  • The overlay can contain images and other HTML elements
  • Its compatible with all modern browsers (And even IE6, the “not-so-modern” browser).

Issues

Like all in-field label implementations, this plugin still has problems when the browser tries to pre-fill the fields. When Safari and Firefox pre-fills the fields for the user, it never sends a “change” event to hook into. You can get around this by adding autocomplete=”off” to the input elements, but this is undesirable for longer forms. I am looking for a fix, but for now, this plugin is still usable for shorter forms!

Quick Overview

The effect is achieved by overlaying the label element over the input, password, or textarea and making it semi-transparent when the field has focus. Once a keystroke is detected the label disappears entirely until the field loses focus. If it is empty on blur, then the label fades back in. Clicking on the label auto sets focus on the field.

Download It

Head over to the Sample Page to read more about the plugin and to download it. Let me know your thoughts and suggestions in the comments below!

Doug Neiner is an Editor at Fuel Your Coding and an official member of the jQuery Team. He is addicted to new technology, and specifically loves spending time with WordPress, Ruby on Rails and jQuery. Learn more via twitter or his Google Profile.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote