homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
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




msg:3331883
 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




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


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

Fotiman




msg:3332983
 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




msg:3333037
 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




msg:3333796
 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




msg:3334840
 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




msg:3335091
 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