Fading form values with jQuery

Question

Is there any way to fade out the set value of a field on focus, and then fade it back in on blur if nothing was entered?

I'd like to fade out "Enter your name..." on focus, but fade it back in on blur if the user didn't enter anything.

Thanks!

Answer 1

I'd check out the labelOver plug-in for this. Very lightweight and does a field mask like you're talking about...I'm using it currently as tip text for search fields.

For a quick look: Demo Here

Answer 2

Try the jQuery labelify plugin: http://www.kryogenix.org/code/browser/labelify/

I think it's exactly what you're looking for.

Answer 3

There are a lot of Watermark plugins out there for jQuery. One of them should do the job, I'd imagine

Answer 4

I have been using a plugin for this - and it has worked quite well.

///http://code.google.com/p/jquery-watermark/
/// Adds the watermark to the text entry areas
var watermarkText = '<type>';
$(function()
{
    $('.cptEntryArea').watermark(watermarkText);
});