Input box default value disappears onclick

[snowdzine]

I am trying to figure out how to develop an input box that contains some greyed out default value that will disappear when the user clicks in the box. This would be something like example text on what to type in the box. I have seen this done through javascript but haven't had luck with it working for multiple boxes or across browsers.

Any help or leads would be appreciated.

[FlashBuddy]

<input type="text" style="color:#555555;" size="40" value="yourvalue" onFocus=this.value=''>

[Fotiman]

<input type="text" style="color:#555555;" size="40" value="yourvalue" onFocus=this.value=''>

UGH! No, don't do that. If you do, then ever time you user selects the field, any information he/she added will be lost.

There are a couple of ways to do this. I would suggest you google for the term "compact forms". This will provide you with the best options for a semantic, accessible solution.

[whoisgregg]

You'd want to check the value before clearing the field:

<input type="text" value="Put something here!" onfocus="this.value = (this.value=='Put something here!')? '' : this.value;">

[Drag_Racer]

create your greyed out default text as an image and set it to the background of the input

onfocus set background to white, then onblurr check for a value then set accordingly

[Fotiman]

@Drag_Racer

Setting a background image as you propose would be quite inaccessible for anyone that is using a screen reader, or that has JavaScript disabled. It doesn't provide any semantic meaning to notify the user what the field is for, but instead relies entirely on visual cues that you can't be sure will be seen. Avoid doing it that way.

[Drag_Racer]

I agree with all your saying, I just suggested it cause I saw Google do it.