onChange doesn't work after onFocus runs

zackw

Hi, got a non-php question, but oh well, how many forums should a guy be registered to anyway!

So I've got a form and on the text boxes I use both onFocus and onChange.
The text boxes have default values in them such as "type your name here" or whatever.

onFocus="this.value==this.defaultValue?this.value='':null" onChange="checkinput('Full Name', this.id)"

The onFocus event checks if default text is there, if so, blanks the field.
If the user had typed something or changed the value, it won't erase it. So onFocus is only there to blank out default text when present.
The onChange event runs my checkinput function. I check the textbox for a new value and change its color, or if the box is blank, I put the default text "Full Name" back into the box. All my text boxes have a code like this, with a different default text sent to the function. The default text I make to a light grey, and when they type something it turns black, that's the point.

Here is the problem. When they enter a text box, onFocus runs, clears the text, and waits for them to type, so far so good. But if the user simply tabs out of the box without typing anything, onChange doesn't fire. But it gets better. If they tab all over the form back and forth through the box, it still won't fire. If they click around in different boxes and back again, it won't fire. The only way to get onChange to reset the default text is to go in the box, type new text, leave the box, go BACK in again, and then delete the text, and leave again. At that point the box is blank, and onChange fires and restores the default text and changes colors.
In fact, I don't think onFocus fires again either until the contents are changed.

What I want to happen, is when they click the box, it erases the default text and waits for input, but if they tab out and leave the box blank, the default input will be put back in again. In which case they can enter the box again later and once again the default text will be erased and wait for input.

Note that it works in the other direction. In other words, when onChange resets the default text, you can go right back in and the text will be erased by onFocus. But when onFocus erases text, you can't go back in and have onChange reset it.

Is there a way to accomplish this? Thanks!

Weedpacket

zackw wrote:
But if the user simply tabs out of the box without typing anything, onChange doesn't fire.

Well, no; because it didn't change.
Have you tried using the onBlur event instead?

zackw

Well it did change, my onFocus event changed it from "Full name" to "". That is a change.

But yes, onBlur works much better. I originally didn't use it because I read people complaining that it fired too much or something. But I ran a quick test and it seems to fire when it's supposed to. So that's OK with me.

Peace

Weedpacket

zackw wrote:
Well it did change, my onFocus event changed it from "Full name" to "". That is a change.

Wouldn't count: the field has to lose focus as well - otherwise the onchange handler would fire every time the user typed a character.

Not to mention all the fun times that could be had with an onchange handler that changes the value of the field that fired the onchange handler.

See http://www.w3.org/TR/html401/interact/scripts.html#adef-onchange

I suppose you could argue that having the JavaScript object's value field change programatically and then having the user shift the control focus elsewhere manually should cause the onchange event handler to fire, but ... it doesn't really reflect what the user is doing - all the user is doing is shifting control focus elsewhere.