homepage Welcome to WebmasterWorld Guest from 54.237.151.188
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Input box default value disappears onclick
snowdzine

5+ Year Member



 
Msg#: 3331881 posted 11:40 pm on May 5, 2007 (gmt 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.

 

FlashBuddy

5+ Year Member



 
Msg#: 3331881 posted 3:13 pm on May 7, 2007 (gmt 0)


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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3331881 posted 3:25 pm on May 7, 2007 (gmt 0)


<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

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



 
Msg#: 3331881 posted 4:16 pm on May 7, 2007 (gmt 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;">

Drag_Racer

5+ Year Member



 
Msg#: 3331881 posted 3:02 pm on May 8, 2007 (gmt 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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3331881 posted 2:08 pm on May 9, 2007 (gmt 0)

@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+ Year Member



 
Msg#: 3331881 posted 5:58 pm on May 9, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved