Question

I remember seeing a tutorial somewhere that talks of how to style your input forms in a more “usable” way.

Essentially, you have a placeholder value and when you enter the input, it hides the hint so to speak.

Now, just to be clear: I don’t want the hint (placeholder value text) to disappear on focus, but rather to go lighter when I first start typing something. Good examples:

• Check out the forms on Aardvark. This is exactly how I wish to have my input forms.

• Our very own Stack Overflow — when you try to ask a question, on clicking inside any input form, it doesn’t hide the text right away. You see your cursor as well as the hint. but when you start to type, it hides the hint. (I would prefer having it go to a much lighter shade rather than hiding all together though, like the above Aardvark example.)

I remember very clearly reading a tutorial somewhere on the interwebz with this exact requirement, but darn, I forgot to bookmark it.

Any suggestions/links?

[Update: I recently found a jQuery plugin In-Field Labels that does exactly what i want. Also, here’s the link to an improvement of the same plugin. ]

Answer 1

You may want to start from this:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

You should probably tweak the above to use JavaScript functions in such a way not to repeat your hint string three times, but I hope this can get you going in the right direction.

I also noticed that the “Join Now” forms at vark.com also set the cursor position to the start of the text box instead of leaving it at the end. This can be bit tricky to make it work cross-browser, but you may want to check the solution proposed in the following article by Josh Stodola:

• Setting Cursor Position in a Textbox or TextArea with Javascript