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 displayedfocusColor– colour of the active text, i.e. user inputvalue– 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
V.nice. I might use this on a site that I am currently working on
Gilles, imho it would be a good idea to replace the $ with jQuery. As this makes it more versatile as you can use it with other libraries that confiscate $ ( cough prototype…)
just my 2 cents…
@Wilfred this should be fine as I use a closure & pass the value of ‘jQuery’ in with
(function($){
//plugin code
})(jQuery);
This will allow people to use noConflict() as well.
You can see the exact explanation of the pattern on the jQuery authoring page
the .js states:
‘$.fn.autoInputLabel = function(options) {‘
while your html example uses : ‘$(‘input:text’).inputAutoLabel’. you might want to change that?
@Thomas: thanks for pointing that out. It’s fixed now & in the repository.
Pingback: Viết status Yahoo Messenger bằng tiếng Việt | Cong dong sinh vien Vietnam - Svviet.com