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.
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
The plugin only works on
<input type="text"> fields.