HTML forms and onclick/onfocus

Diesen Artikel auf deutsch

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.

Share this page:

This entry was written by Nicolas, posted on 2008/09/20, 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.

16 Comments

Posted by William Uzelac on 2008/11/11 at 06:18. Reply

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
- Posted by nicolas on 2008/11/11 at 08:56. Reply
  
  I guess you could use an onload or onunload event. Something like
```
window.onload=function()
```
  Not sure why you would want to do that though.
Posted by Ray on 2009/01/23 at 17:49. Reply

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
- Posted by nicolas on 2009/01/23 at 18:13. Reply
  
  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
  - Posted by Ray on 2009/01/23 at 18:32. Reply
    
    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
    - Posted by nicolas on 2009/01/23 at 18:42. Reply
      
      onfocus="this.style.color='#000'; if (this.value == 'Who is the Skater?') {this.value=''}"
      - Posted by Ray on 2009/01/23 at 18:50. Reply
        
        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
- Posted by nicolas on 2009/01/23 at 18:18. Reply
  
  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.
  - Posted by Ray on 2009/01/23 at 18:40. Reply
    
    That’s strange..
    When I reload the page it resets to the default.
    - Posted by Ray on 2009/01/23 at 18:52. Reply
      
      Ok i now see in Firefox that reloading the page leaves the user entered text….
      
      This is not the case in Safari…
      - Posted by nicolas on 2009/01/23 at 19:06. Reply
        
        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…
        
        Posted by Ray on 2009/01/23 at 19:32. Reply
        
        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?
Posted by pesura on 2009/09/22 at 14:00. Reply

oh thats great, thanks so much. i’ve just found i had been looking for
Posted by Leyton Jay on 2009/10/13 at 12:33. Reply

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!
Posted by Oli on 2009/11/26 at 17:50. Reply

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
- Posted by Nicolas on 2009/11/27 at 17:45. Reply
  
  Hi Oli, I’m not sure what you mean? Can you describe it in more detail?