HTML forms and onclick/onfocus
When you use HTML forms it is often desirable to pre-fill some input fields. Your idea could be that you want to give your visitors some clue to what they’re supposed to fill in.This looks nice, for example:
When the user clicks into the field you’ll want to remove the clue. The obvious way to do this is to add an onclick JavaScript command:
<form> <input onclick="this.value=''" type="text" value="Your email" /> </form>
The user can still access the input field through other means than clicking. He can use the tab key for example. That’s why usually the onfocus event is more useful:
<form> <input onfocus="this.value=''" type="text" value="Your email" /> </form>
This seems to work nicely. However there’s still a problem. When a user fills in his email address, reads a little more on your site and clicks the input field again, his address will be removed again! So to make sure this doesn’t happen we add a little check for the content of the field:
<form> <input type="text" value="Your email" onfocus="if (this.value == 'Your email') {this.value=''}" /> </form>
And here it is:
Restore default value if nothing is entered
Ok, now this is working. However, when your visitor decides not to input any data, the field stays empty. If you have no label for the input he or she might forget what the field was for. We fix this by restoring the default value when the input field is left:
<form> <input type="text" value="Your email" onblur="if(this.value == '') { this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.value=''}" /> </form>
Thanks to Ray for his example linked in the comments.
Select onclick
But sometimes this isn’t the best solution. It could be more desirable to highlight the content of the input field if you’re offering some kind of search. The user may not want to start a new search but to modify the existing one.
By highlighting the input field the user can choose to either empy it by starting to type or to modify it by using the arrow keys.
<form> <input onfocus="this.select()" type="text" value="Your previous searcj" /> </form>
Dynamic input color
This is a little advanced. Let’s assume you want the default value to be in a different color and change it onclick. This is one working solution:
<form> <input style="color: #f00" type="text" value="Your email" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.style.color='#0f0'; this.value=''}" /> </form>
Keep in mind that this might create problems when you reload the page. Some browsers will remember the value of the input field, and the color will be different even though the field does not contain the default value. Fixing that is beyond the scope of this post. See onload and domready events.
Related posts:
- Mooified focus onload but keep backspace intact
- My favorite Firefox Add-ons
- Track clicks with mootools
This entry was written by nicolas, posted on 20. September 2008, filed under Technology and tagged development, HTML, JavaScript, onclick, onfocus, usability, Webdesign. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
I am Nicolas Kuttler, a web developer, system administrator and IT consultant from France, currently living in Germany. 
nicolas: Hi Joey, not sure what you mean. The only thing that has a background is the success + error message. You...
Joey: Hey Nic, How to clear the background of your plugin? 
Kar: Wordpress error log shows nothing that could be related to this problem.
That is great. Now additional question if I may.
If I want “Your email” value to return back on page load, what do I change?
Thanks,
William
I guess you could use an onload or onunload event. Something like
Not sure why you would want to do that though.
i’ve got it all set, but i want the default text to be grey, and then when the user types in the input, I want the new text top be black….
Can you help me?
here’s my form
Edit: remove 404
You can add this.style.color=’#000′; before the if(). I like how you reset the input value to the default if nothing is entered, I think I will add that to my post. That would have solved William’s problem above too. And I’ll add the color change too. Good comment
I cannot seem to get that this.style.color=’#000′; to work?
original input
can you show me exactly where to put it – thank so much
onfocus=”this.style.color=’#000′; if (this.value == ‘Who is the Skater?’) {this.value=”}”
It’s not working for me.
I’m on a Mac
checking with safari 3 and firefox 2.
When I add the this.style.color=’#000′; snippet, not only does it not change the font to black– but it also removes the functionality of the “this.value” …
AIM=onepercentposse
Another note, if you reload the page the input value is still what the user entered, but the text would remain grey.
Fixing that would probably be a little tricky, you’d need an onload or some ondomready event that checks the content of all inputs and changes the color.
But that’s only required if you want to make a perfect form.
That’s strange..
When I reload the page it resets to the default.
Ok i now see in Firefox that reloading the page leaves the user entered text….
This is not the case in Safari…
Yeah. I have updated the post with a color switching example and added your onblur technique. That color switchin and page reloading thing needs to be tested in detail…
Thank Nicolas-
After looking at your code I notice you had put the this.style.color=’#000′ in a different spot then you had mentioned before….
It’s all working good now-
Now if only I could get the progressive upload status bar working… Any ideas?
oh thats great, thanks so much. i’ve just found i had been looking for
Thanks for these javascript tips Nicolas, they’re really handy!
I know no javascript what-so-ever despite being a bit of an expert in XHTML and CSS.
I’ve decided to learn some, so this is a nice starting point, cheers!
Hi, Great article.
However, when this is used with a javascript validator the validation script is ignoring the fields as they are already filled in. Is there a simple fix to this?
Cheers
Hi Oli, I’m not sure what you mean? Can you describe it in more detail?
thank you! (city field on my form is color changing on entry now!)
Thanks for the tips
Could you also post a solution for ‘textarea’?
for some reason I can’t get it to work.
Thanks
Hello snosie, for textareas you’ll need something like
Please test it across all browsers though, it’s just a quick guess.
Big thanks Bro
Thank you Nicolas, for the clear and concise tutorial.
It’s useful for me, thanks.