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.

Adding such a behaviour to a field is quite simple if we take advantage of the onclick and onfocus event:

You click on the field and its empty, that works! But type something, leave the field and then click again on the field … it’s empty again. That’s not what we want, to fix this we could simply check if the field value is different from the default value.

if(this.value == 'Field label') {
    this.value = '';
}

There some other problems I faced when adding such a behaviour to a field: What to do on submit? What to do on reset? Can I add a focus class? …

To do this you need to specify the behaviour for every field. When you are working on huge projects that’s not an option. So I wrote a jQuery class so I could use excellent jQuery selectors (thank you so much for that John!).

So the plugin does a lot more then you would expect. You can enable it by including jQuery and my plugin. You can define the fields te emptyonclick manually, like in this example:

$(document).ready((function(){
    $('#username, #password').emptyonclick();
});

But by simply adding this line of code, every field with the ‘emptyonclick’ class will empty onclick:

$(document).ready(function(){
    $('.emptyonclick').emptyonclick();
});

Download the plugin from our server. Or visit the jQuery project page.

You can see the plugin working on the E website and Jonno’s contact form.