Welcome to WebmasterWorld Guest from 54.227.1.130

Forum Moderators: open

Message Too Old, No Replies

Input box default value disappears onclick

     

snowdzine

11:40 pm on May 5, 2007 (gmt 0)

5+ Year Member



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

3:13 pm on May 7, 2007 (gmt 0)

5+ Year Member




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

Fotiman

3:25 pm on May 7, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




<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

4:16 pm on May 7, 2007 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

3:02 pm on May 8, 2007 (gmt 0)

5+ Year Member



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

2:08 pm on May 9, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@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

5:58 pm on May 9, 2007 (gmt 0)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month