On change event of <select> in Firefox doesn't fire when using cursor keys

Discussion in 'Javascript' started by xxbmichae1@supergambler.com, Aug 14, 2005.

  1. Guest

    I have a <select> object that i've set up an onchange event that fires
    in IE fine when I use the cursor up and down in the list, but If I use
    the cursor up and down in Firefox the event doesn't seem to fire until
    I've left the field....If i use the mouse all is fine, only when using
    the cursor keys does it not fire the onchange event in FF.


    Thanks for any help in advance.


    Michael
     
    , Aug 14, 2005
    #1
    1. Advertising

  2. ASM Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    wrote:
    > I have a <select> object that i've set up an onchange event that fires
    > in IE fine when I use the cursor up and down in the list, but If I use
    > the cursor up and down in Firefox the event doesn't seem to fire until
    > I've left the field....If i use the mouse all is fine, only when using
    > the cursor keys does it not fire the onchange event in FF.


    What do you call cursors ? (are they arrows in scrollbar of list ?)

    on my Mac, with arrow keys up and/or down of keyboard :
    - IE scrolls window
    - FF does what you say your IE does


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 15, 2005
    #2
    1. Advertising

  3. RobG Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    wrote:
    > I have a <select> object that i've set up an onchange event that fires
    > in IE fine when I use the cursor up and down in the list, but If I use
    > the cursor up and down in Firefox the event doesn't seem to fire until
    > I've left the field....If i use the mouse all is fine, only when using
    > the cursor keys does it not fire the onchange event in FF.
    >


    I guess your unasked question is "How do I get consistent behaviour" -
    the answer is to not use a select to fire onchange events (which is
    probably not what you want to hear).

    The W3C spec says that onchange should fire when the control loses focus
    (provided the value has changed). IE doesn't wait, it fires as soon as
    the option is selected. Firefox does wait if you use the keyboard, but
    not if you use the mouse.

    There are other inconsistencies between various browsers and the spec,
    unfortunately the result is a bit of a mess.

    If you explain what you are trying to do some other solution can be
    proposed.



    --
    Rob
     
    RobG, Aug 15, 2005
    #3
  4. ASM Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    RobG wrote:
    > Firefox does wait if you use the keyboard, but
    > not if you use the mouse.


    Not at all :
    on my Mac with my FF (doctype transitional 4.0)
    it fires on each change (by keyboard's arrow key or by click)
    (scrolling list by lift or mouse well -> no change or fire)

    > There are other inconsistencies between various browsers and the spec,
    > unfortunately the result is a bit of a mess.


    unfortunatly (soupir)


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 15, 2005
    #4
  5. RobG Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    ASM wrote:
    > RobG wrote:
    >
    >> Firefox does wait if you use the keyboard, but not if you use the mouse.

    >
    >
    > Not at all :


    Perhaps I should have said 'Firefox on Windows'.

    > on my Mac with my FF (doctype transitional 4.0)
    > it fires on each change (by keyboard's arrow key or by click)
    > (scrolling list by lift or mouse well -> no change or fire)


    So we have variation not only between browsers, but in the same browser
    on different platforms. It just gets better... :-x

    [...]

    --
    Rob
     
    RobG, Aug 15, 2005
    #5
  6. ASM Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    RobG wrote:
    >
    > So we have variation not only between browsers, but in the same browser
    > on different platforms. It just gets better... :-x


    because sometimes I have some difficulties with my English ...
    my test was :

    <select size=4 onchange="alert(this.options[this.selectedIndex].text);">
    <option>test 1
    <option>test 2
    <option>test 3
    <option>test 4
    <option>test 5
    <option>test 6
    <option>test 7
    </select>

    hope was right subject of post (?)


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 15, 2005
    #6
  7. RobG Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    ASM wrote:
    > RobG wrote:
    >
    >>
    >> So we have variation not only between browsers, but in the same
    >> browser on different platforms. It just gets better... :-x

    >
    >
    > because sometimes I have some difficulties with my English ...


    Hey, you're English is fine - certainly better then my French!

    > my test was :
    >
    > <select size=4 onchange="alert(this.options[this.selectedIndex].text);">

    ----------^^^^^^

    The size attribute actually changes the behaviour of the select's
    onchange event in Firefox (Windows XP). If size is 1 or not defined,
    the onchange does not fire using the keyboard until the select loses
    focus. With a size attribute of 2 or greater, the onchange fires every
    time an option is selected with the keyboard.

    Is it the same for Safari et al?

    [...]

    --
    Rob
     
    RobG, Aug 15, 2005
    #7
  8. Guest

    Thanks for the reply Rob, What I am trying to achieve is when the user
    selects an item in the list, depending on the selection I want to
    enable and make visible some other objects on the page. I have a real
    pain in the ass supervisor who doesn't think my idea to make the
    current project run in a browser versus a client / server app, and one
    of her things is being able to use the keyboard and not have to switch
    back and forth between keyboard and mouse.....so in my attempt to prove
    myself right and her wrong, I really need this to work with just using
    the keyboard down arrow and up arrow.....now one thought I did have
    since the event fires when I tab away from the list, is in the function
    that fires, I could set the focus to the first enabled object that the
    routine just made enabled thus giving the illusion that it's doing what
    I want.....

    Any other thoughts or ideas would be greatly appreciated.....

    Thanks in advance!

    Michael
     
    , Aug 15, 2005
    #8
  9. RobG Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    wrote:
    > Thanks for the reply Rob, What I am trying to achieve is when the user
    > selects an item in the list, depending on the selection I want to
    > enable and make visible some other objects on the page. I have a real
    > pain in the ass supervisor who doesn't think my idea to make the
    > current project run in a browser versus a client / server app, and one
    > of her things is being able to use the keyboard and not have to switch
    > back and forth between keyboard and mouse.....so in my attempt to prove
    > myself right and her wrong, I really need this to work with just using
    > the keyboard down arrow and up arrow.....now one thought I did have
    > since the event fires when I tab away from the list, is in the function
    > that fires, I could set the focus to the first enabled object that the
    > routine just made enabled thus giving the illusion that it's doing what
    > I want.....
    >
    > Any other thoughts or ideas would be greatly appreciated.....
    >


    You can use a combination of onkeyup and onchange, which seems to work
    OK (read thread above). You should have a reset function that returns
    the form to the default onload (otherwise some browsers will show a
    selected option that does not match the page content), if you want it to
    act more like a form, then a reset button should be included too (see
    example below).

    onkeyup introduces a touch of lag, onkeydown selects the previous option
    (maybe that's OK?).


    <body onload="document.formA.reset();">

    <script type="text/javascript">
    function changeIt( el ){
    var x = document.getElementById('xx').firstChild;
    x.data = el.options[el.selectedIndex].text;
    }
    </script>

    <form action="" id="formA" name="formA">
    <select name="selectA" size="1"
    onchange="changeIt( this );"
    onkeyup ="changeIt( this );"
    >

    <option selected>
    <option>test 1
    <option>test 2
    <option>test 3
    <option>test 4
    <option>test 5
    <option>test 6
    <option>test 7
    </select>
    <input type="reset" onclick="
    this.form.selectA.selectedIndex=0;
    changeIt(this.form.selectA);
    ">
    </form>
    <div id="xx">&nbsp;</div>

    </body>

    > Thanks in advance!
    >
    > Michael
    >



    --
    Rob
     
    RobG, Aug 15, 2005
    #9
  10. ASM Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    RobG wrote:
    > ASM wrote:
    >>
    >> my test was :
    >>
    >> <select size=4 onchange="alert(this.options[this.selectedIndex].text);">

    > ----------^^^^^^
    >
    > The size attribute actually changes the behaviour of the select's
    > onchange event in Firefox (Windows XP). If size is 1 or not defined,
    > the onchange does not fire using the keyboard until the select loses
    > focus.


    That's right : FF, IE, Safari

    click on select -> list displayed
    arrow key -> moves line to line
    Enter key -> validation and onchange


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 15, 2005
    #10
  11. ASM Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    wrote:
    > I really need this to work with just using
    > the keyboard down arrow and up arrow.....now one thought I did have
    > since the event fires when I tab away from the list, is in the function
    > that fires, I could set the focus to the first enabled object that the
    > routine just made enabled thus giving the illusion that it's doing what
    > I want.....
    >
    > Any other thoughts or ideas would be greatly appreciated.....


    on my Mac and with a select not defined size or set to 1

    IE, FF, Safari -> same way :

    1) click on select (or tab-indexed ?) -> list displayed
    2) Arrow key -> moves line to line
    3) Enter key -> validation and onchange fired


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 15, 2005
    #11
  12. Csaba Gabor Guest

    RobG wrote:
    > onkeyup introduces a touch of lag, onkeydown selects the previous option
    > (maybe that's OK?).


    > <select name="selectA" size="1"
    > onchange="changeIt( this );"
    > onkeyup ="changeIt( this );"
    > >


    replace that onkeyup line with
    onkeydown="window.setTimeout(function(e0){return
    function() {changeIt(e0)}}(this),0)"


    to get that spiffy, lagless performance you've been dreaming about. It
    also responds to each item when the arrow keys are held down, hence
    repeat.

    Tested on IE, FF under Win XP Pro
    Csaba Gabor from Vienna
     
    Csaba Gabor, Aug 15, 2005
    #12
  13. Guest

    I like it!!! Thanks so much!
     
    , Aug 16, 2005
    #13
  14. Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    wrote :
    > I have a <select> object that i've set up an onchange event that fires
    > in IE fine when I use the cursor up and down in the list, but If I use
    > the cursor up and down in Firefox the event doesn't seem to fire until
    > I've left the field....If i use the mouse all is fine, only when using
    > the cursor keys does it not fire the onchange event in FF.
    >
    >
    > Thanks for any help in advance.
    >
    >
    > Michael
    >


    That's by design.

    Select onChange not called using down arrow key
    https://bugzilla.mozilla.org/show_bug.cgi?id=126379

    and this bug has at least 25 duplicates.

    Gérard
    --
    remove blah to email me
     
    Gérard Talbot, Aug 16, 2005
    #14
  15. ASM Guest

    Re: On change event of <select> in Firefox doesn't fire when usingcursor keys

    Gérard Talbot wrote:
    > wrote :
    >
    >> I have a <select> object that i've set up an onchange event that fires
    >> in IE fine when I use the cursor up and down in the list, but If I use
    >> the cursor up and down in Firefox the event doesn't seem to fire


    > That's by design.
    >
    > Select onChange not called using down arrow key
    > https://bugzilla.mozilla.org/show_bug.cgi?id=126379
    >
    > and this bug has at least 25 duplicates.


    the real question : is it a bug in FF/Mozilla or is it in IE ?

    if, going thru options, fires each next ... not a good idea

    FF select onchange : up/down arrow then, if good, Enter key


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 17, 2005
    #15
    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. Replies:
    4
    Views:
    537
  2. dmaziuk
    Replies:
    3
    Views:
    587
    Chris Gonnerman
    Jan 25, 2011
  3. NIIT
    Replies:
    0
    Views:
    195
  4. Andy Fish

    load event doesn't fire unless init event is present

    Andy Fish, Jun 28, 2005, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    264
    Jonathan Mast
    Jul 7, 2005
  5. Jan Doggen

    Pressing keys in SELECT- Firefox hangs

    Jan Doggen, Sep 19, 2006, in forum: Javascript
    Replies:
    0
    Views:
    90
    Jan Doggen
    Sep 19, 2006
Loading...

Share This Page