Making "helper" text in a form be a different color then typed text.

Question

<input name="phone" type="text" id="phone" value="Phone #" onfocus="value=''">

I've got two problems here. The main one is I would like the helper text (in this case "Phone Number") to be a different color then the inputted text from the user, to make it easier for the user to differentiate between filled and unfilled fields.

The second is that with this methodology (onfocus="value''") if you mistype something in a field and come back to it you have to retype the whole thing which isn't really acceptable.

Answer 1

There is a great, simple jQuery plugin that will do exactly what you want here:

http://blog.amnuts.com/2009/02/17/text-box-hint-values-with-jquery/

It achieves the effect you want using CSS.

There is another simple jQuery plugin here:

http://fuelyourcoding.com/scripts/infield/

That one offers slightly different functionality in that the watermark text stays until you start typing.

Answer 2

Instead of using the value of the textfield as helper text, it is much nicer and more accessible to position the label over the field and hide it when the textfield is not empty.

edit: there is a jQuery plugin for that, too.

Answer 3

Maybe the help text should be outside of the field altogether? "Phone #" seems more like a title of the field than a help text.

If the hint is not needed at all times, maybe it's not needed at all? And if it is needed, what happens when user has typed something? One shouldn't have UI elements or texts that vanishes suddenly.