Onchange et Firefox...

david.bercot · Jul 11, 2006

Hi,

I have a big problem with a simple event : onchange !!!
If I write this page :
<html>
<body>
<form id="vu">
<input id="var01" name="var01" size="5" onchange="return false;"/>
</form>
</body>
</html>
everything is ok in IE (I can't leave the input zone !) but nothing
happens in Firefox !!!
It looks like the event is not fired or...

Do you have any clue ?

Thank you very much.

David.

Randy Webb · Jul 11, 2006

(e-mail address removed) said the following on 7/11/2006 4:01 AM:

Hi,

I have a big problem with a simple event : onchange !!!

Contrary to your Subject line, it seems IE is the one that is wrong.

If I write this page :
<html>
<body>
<form id="vu">
<input id="var01" name="var01" size="5" onchange="return false;"/>
</form>
</body>
</html>

What do you think that code is supposed to do? You are telling it "When
this gets changed, do nothing". Well, that is what Firefox does - nothing.

everything is ok in IE (I can't leave the input zone !) but nothing
happens in Firefox !!!

You are going about it the wrong way then. onchange="this.focus()"

It looks like the event is not fired or...

Or you are trying to solve the wrong problem the wrong way.

Do you have any clue ?

I have lots of clues, how many do you want?

Answers are free, clues are 100 Dollars US each.

David BERCOT · Jul 11, 2006

Randy said:
(e-mail address removed) said the following on 7/11/2006 4:01 AM:

Contrary to your Subject line, it seems IE is the one that is wrong.

OK. May be my explanation was wrong ;-)

What do you think that code is supposed to do? You are telling it "When
this gets changed, do nothing". Well, that is what Firefox does - nothing.

I'd like the user to stay in the input zone.

You are going about it the wrong way then. onchange="this.focus()"

It changes nothing !!!
<html>
<body>
<form id="vu">
<input id="var01" name="var01" size="5" onchange="this.focus()"/>
<input id="var02" name="var02" size="5" onchange="this.focus()"/>
</form>
</body>
</html>
If I am in the var01 zone, I change the value and then "tab", I go to
the var02 zone !!!
It doesn't work in IE too...

Or you are trying to solve the wrong problem the wrong way.

Perhaps...
In IE, it seems simple. I am in a zone, I verify the value. If it is
ok, I do nothing (so, the user will go in the next zone) and if the
value is wrong, I say "return false" and the user stays in this zone
!!!
If you have other solution, I'm ok ;-)

I have lots of clues, how many do you want?

Good question ;-) Only the best one ;-)

David.

David BERCOT · Jul 11, 2006

Rik said:
onblur="this.focus()"

Not better !!! This is ok with IE but not with Firefox...

David.

Lasse Reichstein Nielsen · Jul 11, 2006

Rik said:
onblur="this.focus()"

Which, while perhaps solving the OP's stated problem, is something
one should never write in a web page. It makes navigating away
from the input control impossible, which is extremely user-unfriendly,
and in the case of someone using keyboard navigation, you can't even
click on buttons anywhere else on the page.

/l

David BERCOT · Jul 11, 2006

Lasse said:
Which, while perhaps solving the OP's stated problem, is something
one should never write in a web page. It makes navigating away
from the input control impossible, which is extremely user-unfriendly,
and in the case of someone using keyboard navigation, you can't even
click on buttons anywhere else on the page.

Of course, I should not use this like that. It would be in a function
with a test...
But, before this test, I don't understand why this function does not
work in Firefox !!!

Do you have any idea ?

Thank you.

David.

Bart Van der Donck · Jul 11, 2006

David BERCOT wrote:

[...]

Not better !!! This is ok with IE but not with Firefox...

Here it is, but it's really dirty:

<input onblur="this.focus()">
<input onfocus="this.blur()">

Lasse Reichstein Nielsen · Jul 11, 2006

David BERCOT said:
....[don't]...
Of course, I should not use this like that. It would be in a function
with a test...

Still, it's not good user interface design to prevent the user from
doing what he wants to do.

It's much better, safer, and coincidentally also easier to implement,
to mark an erroneous field as such and just prevent submission, than
it is to prevent navigation.
Let people write garbage if that is what they want. Just tell them
that it's garbage and (attemp) to stop them submitting it (but check
on the server anyway).

But, before this test, I don't understand why this function does not
work in Firefox !!!

It's a matter of timing. When you try to leave an input control,
the browser fires a number of events - onblur, onchange and onfocus
(on the new control). It happens in roughly that order (at least
in Firefox).
It corresponds to the browser first removing focus from one control
and then setting it on another. In some browsers, setting the focus
back in on of the first two event handlers will work, in Firefox,
the setting of the focus to the other control will still happen
afterwards.

What you could do was have a check when you leave a field, that sets
stores the erroneous field somewhere, and then, onfocus in the other
controls, see if there is an erroneous control and set focus back.

But still, it's bad design!
/L

David BERCOT · Jul 11, 2006

Still, it's not good user interface design to prevent the user from

doing what he wants to do.

I don't agree but this is not the subject ;-)
In fact, it depend of the application and the public. In my case, it is
normal to prevent the user from leaving the input zone...

What you could do was have a check when you leave a field, that sets
stores the erroneous field somewhere, and then, onfocus in the other
controls, see if there is an erroneous control and set focus back.

Hum, it is quite difficult because there are a lot of things to control
(next zone, click anywhere on the page, etc...).

I've tried to understand a bit more the W3C DOM and I have some
problems...

If I write an event handler :
document.getElementById("var01").addEventListener("change",monchange,true);
this is ok and the monchange function is called.
In this function, if I do an alert(event.cancelable), the answer is
true !!!
But then, neither a preventDefault or stopPropagation works...
If the event is keypress or keydown (not keyup nor change), this is ok
!!!

I dont't understand the W3C DOM at all !!!
If the event (change) is cancelable, how can I cancel it ?

David.

Lasse Reichstein Nielsen · Jul 11, 2006

David BERCOT said:
Hum, it is quite difficult because there are a lot of things to control
(next zone, click anywhere on the page, etc...).

Another solution is to delay the focusing, i.e.,

<input type="text"
onblur="var self=this;setTimeout(function(){self.focus();},1);">

This should put the focusing at the end of the queue.

If I write an event handler :
document.getElementById("var01").addEventListener("change",monchange,true);
this is ok and the monchange function is called.
In this function, if I do an alert(event.cancelable), the answer is
true !!!
But then, neither a preventDefault or stopPropagation works...

I'm not sure what it means to cancel a "change" event (which probably
means that it should not be cancelable

. Being cancelable mean that
preventDefault() should cancel the default behavior.
According to the W3C, "change" events in HTML should not be cancelable.

If the event is keypress or keydown (not keyup nor change), this is ok
!!!

There is a default action to prevent in that case.

I dont't understand the W3C DOM at all !!!

It's a jungle

.

If the event (change) is cancelable, how can I cancel it ?

The correct way *is* to use preventDefault. It probably isn't
cancelable, even if your browser erroneously report it as such.

/L

nicEdit and onchange	7	Jun 16, 2009
Onchange() problem. Please help!	1	Feb 29, 2008
submit within onchange not working correctly in Firefox	5	Oct 17, 2005
focus after onchange event and regex test not working	3	Feb 28, 2006
select onchange with typing in Webkit	11	Oct 7, 2008
All CRUD operations work except POST. Why?	2	May 28, 2023
Help on onchange event for refreshing the page	1	Nov 19, 2008
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023

Onchange et Firefox...

david.bercot

Randy Webb

David BERCOT

David BERCOT

Lasse Reichstein Nielsen

David BERCOT

Bart Van der Donck

Lasse Reichstein Nielsen

David BERCOT

Lasse Reichstein Nielsen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads