Gilles Ruppert

a.k.a. elduderino78

jQuery Plugin autoInputValue - Default Input Values Made Easy

We all know the problem: the designers are struggling to get the form elements in the space they have or they decide that having labels next to input fields is not really necessary… Instead the label is displayed inside the input field & supposed to disappear when the user clicks or focuses on the field.

I’ve come across this quite often lately, so I quickly put a little jQuery plugin together to make my life a bit easier.

It works on input fields and it works just like any other jQuery plugin.

All you need to do is call the plugin with the selectors you are interested in, i.e. $('input:text.email').autoInputLabel();

The options are specified in an object literal & can be:

  • blurColor - colour of the text when the label is displayed
  • focusColor - colour of the active text, i.e. user input
  • value - the label that should be displayed

By default, the plugin displays the value of the value attribute. If there is none, it checks whether there has been a value provided by the user. Otherwise it looks for the label associated with the input field (that is probably hidden, otherwise why would you use the plugin?). The label needs to be associated to the input field with the for attribute.

The plugin only works on <input type="text"> fields.

You can download the latest version from my public svn repository