Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: open

Message Too Old, No Replies

Input box default value disappears onclick

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

New User

5+ Year Member

joined:Oct 5, 2006
posts:5
votes: 0


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.

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

New User

5+ Year Member

joined:May 7, 2007
posts:3
votes: 0



<input type="text" style="color:#555555;" size="40" value="yourvalue" onFocus=this.value=''>
3:25 pm on May 7, 2007 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4965
votes: 10



<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.

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

Senior Member

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

joined:Dec 9, 2003
posts:3416
votes: 0


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;">
3:02 pm on May 8, 2007 (gmt 0)

Full Member

5+ Year Member

joined:Jan 29, 2007
posts:228
votes: 0


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

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

Senior Member from US 

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

joined:Oct 17, 2005
posts:4965
votes: 10


@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.

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

Full Member

5+ Year Member

joined:Jan 29, 2007
posts:228
votes: 0


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