Onchange et Firefox...

Discussion in 'Javascript' started by david.bercot@wanadoo.fr, Jul 11, 2006.

  1. Guest

    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.
    , Jul 11, 2006
    #1
    1. Advertising

  2. Randy Webb Guest

    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.
    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jul 11, 2006
    #2
    1. Advertising

  3. David BERCOT Guest

    Randy Webb wrote:
    > 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.


    OK. May be my explanation was 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.


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

    > > 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 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...

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

    >
    > 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 ;-)

    > > Do you have any clue ?

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


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

    David.

    > Answers are free, clues are 100 Dollars US each.
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    David BERCOT, Jul 11, 2006
    #3
  4. David BERCOT Guest

    Rik wrote:
    > David BERCOT wrote:
    > > I'd like the user to stay in the input zone.
    > >
    > >>> 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 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...

    >
    >
    > onblur="this.focus()"


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

    David.
    David BERCOT, Jul 11, 2006
    #4
  5. "Rik" <> writes:

    > 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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jul 11, 2006
    #5
  6. David BERCOT Guest

    Lasse Reichstein Nielsen wrote:
    > "Rik" <> writes:
    >
    > > 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.


    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.
    David BERCOT, Jul 11, 2006
    #6
  7. David BERCOT wrote:

    [...]
    > > onblur="this.focus()"

    >
    > 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()">

    --
    Bart
    Bart Van der Donck, Jul 11, 2006
    #7
  8. "David BERCOT" <> writes:

    > Lasse Reichstein Nielsen wrote:
    >> "Rik" <> writes:
    >>
    >> > onblur="this.focus()"

    ....[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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jul 11, 2006
    #8
  9. David BERCOT Guest

    > 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.
    David BERCOT, Jul 11, 2006
    #9
  10. "David BERCOT" <> writes:

    >> 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...).


    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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jul 11, 2006
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bruno Alexandre

    OnChange Javascript - IE vs Firefox

    Bruno Alexandre, Jun 12, 2006, in forum: ASP .Net
    Replies:
    7
    Views:
    42,838
    Greg Collins [Microsoft MVP]
    Jun 12, 2006
  2. IcemanUK
    Replies:
    0
    Views:
    455
    IcemanUK
    Sep 1, 2008
  3. Replies:
    0
    Views:
    103
  4. Pascal Batzli Jr
    Replies:
    5
    Views:
    215
    Pascal Batzli Jr
    Oct 18, 2005
  5. David McNerney
    Replies:
    4
    Views:
    162
    David McNerney
    Apr 7, 2006
Loading...

Share This Page