Aug 25, 2008 0
The jQuery emptyonclick Plugin
Update 2: This plugin is not maintained anymore. Parts of the code are used in the jQuery UI Watermark plugin.
Update: We created a mini-site and a plugin page on the official jQuery website for the plugin.
A lot of websites have a login form without labels, they let the value of the field indicate what you need to fill in there. It’s very clean and a neat solution if you have limited space for your form.
This is what it looks like:
But if you are not in a lack of pixels you should absolutely don’t use this technique! In that case you must use a regular form with fields and labels like this one:
When a user wants to change the value of field from the first example, he will first need to clear the field. Some people do this by selecting all the text and start writing, but I can imagine people pressing the backspace till the field is empty.
Our solution
To fix that problem, I wrote a jQuery plugin. You just need to include the plugin and define which field should empty onclick.