Even canceling in Firefox

Discussion in 'Javascript' started by Marcin Nowak, Feb 20, 2006.

  1. Marcin Nowak

    Marcin Nowak Guest

    Hi!

    I want to cancel up and down arrows in list (select) element.
    Here is the code:

    <script>

    function Arrows (event)
    {
    code = event.keyCode;
    if (code == 38)
    alert('Up');

    if (code == 40)
    alert('Down');


    if (event.stopPropagation)
    event.stopPropagation();
    else
    event.cancelBubble = true;

    if (event.preventDefault)
    event.preventDefault();
    else
    event.returnValue = false;
    return false;
    };


    </script>

    <form id="theform">
    <select id="answ" name="answ" style="width:300px"
    multiple size="5" onkeydown="return Arrows(event);">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    <option value="5">five</option>
    </select>
    </form>


    It works in IE but doesn't in Firefox. Any ideas how to fix it?

    Marcin
    --
    Marcin Nowak
    www.wyprawa.net .ch.o_mi.k_@.c.ho_m.ik.n_et_
    Ochrona adresu: usun kropki z wyjatkiem ostatniej, podkreslenia
    oprócz pierwszego. Address protection: remove dots except for
    the last one, underscores excluding the first one.
    Marcin Nowak, Feb 20, 2006
    #1
    1. Advertising

  2. Marcin Nowak

    VK Guest

    Marcin Nowak wrote:
    > <select id="answ" name="answ" style="width:300px"
    > multiple size="5" onkeydown="return Arrows(event);">


    SELECT supports by specs onfocus, onchange, onblur. Whatever and
    *however* it supports atop of it is up to the fantasy of a particular
    browser producer.

    In your case I would make a CSS widget instead.

    Also you may to repopulate the list based on the selected items.
    Infortunately the most evident way by setting disabled true/false for
    option or optgroup doesn't work in IE (despite documented).
    VK, Feb 20, 2006
    #2
    1. Advertising

  3. VK wrote:

    > Marcin Nowak wrote:
    >> <select id="answ" name="answ" style="width:300px"
    >> multiple size="5" onkeydown="return Arrows(event);">

    >
    > SELECT supports by specs onfocus, onchange, onblur.


    That is not quite correct. It supports more event handler attributes than
    those:

    ,-[from HTML 4.01 Strict; compacted whitespace]
    |
    | <!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector -->
    | <!ATTLIST SELECT
    | %attrs; -- %coreattrs, %i18n, %events --
    ^^^^^^^ ^^^^^^^
    | name CDATA #IMPLIED -- field name --
    | size NUMBER #IMPLIED -- rows visible --
    | multiple (multiple) #IMPLIED -- default is single selection --
    | disabled (disabled) #IMPLIED -- unavailable in this context --
    | tabindex NUMBER #IMPLIED -- position in tabbing order --
    | onfocus %Script; #IMPLIED -- the element got the focus --
    | onblur %Script; #IMPLIED -- the element lost the focus --
    | onchange %Script; #IMPLIED -- the element value was changed --
    | >
    | [...]
    | <!ENTITY % attrs "%coreattrs; %i18n; %events;">
    | [...]
    | <!ENTITY % events
    | "onclick %Script; #IMPLIED -- a pointer button was clicked --
    | ondblclick %Script; #IMPLIED -- a pointer button was double clicked --
    | onmousedown %Script; #IMPLIED -- a pointer button was pressed down --
    | onmouseup %Script; #IMPLIED -- a pointer button was released --
    | onmouseover %Script; #IMPLIED -- a pointer was moved onto --
    | onmousemove %Script; #IMPLIED -- a pointer was moved within --
    | onmouseout %Script; #IMPLIED -- a pointer was moved away --
    | onkeypress %Script; #IMPLIED -- a key was pressed and released --
    | onkeydown %Script; #IMPLIED -- a key was pressed down --
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    | onkeyup %Script; #IMPLIED -- a key was released --"
    | >

    > Whatever and *however* it supports atop of it is up to the fantasy of
    > a particular browser producer.


    True, if you read that statement in context. False otherwise.

    > In your case I would make a CSS widget instead.


    Whereas the reason that it does not work in Firefox has nothing to do with
    the markup at all (although it is not Valid). Firefox does support the
    specified `onkeydown' event handler attribute for `select' elements used
    here.


    PointedEars
    Thomas 'PointedEars' Lahn, Feb 20, 2006
    #3
  4. Marcin Nowak wrote:

    > I want to cancel up and down arrows in list (select) element.
    > Here is the code:
    > [...]
    > It works in IE but doesn't in Firefox.


    "Does not work" is a useless error description. [psf 4.11]

    <URL:http://jibbering.com/faq/#FAQ4_43>

    > Any ideas how to fix it?


    I do question your crippling keyboard navigation, and the code is not
    Valid markup[1] (however, the `select' element does have an `onkeydown'
    attribute, ignore VK).

    It works though, i.e. the alert box displays the proper value ("Up"/"Down")
    and the selection does not change, for me unchanged (included in an
    otherwise Valid HTML 4.01 document) in

    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.1) Gecko/20060209
    Debian/1.5.dfsg+1.5.0.1-2 Firefox/1.5.0.1.

    The only thing I get is

    | Warning: assignment to undeclared variable code
    | Source file: http://localhost/scripts/test/dom/events/select-onkeydown
    | Line: 13
    | code = event.keyCode;
    | -------^

    (You should use the `var' keyword to declare this a local variable.)

    So the error must be elsewhere.


    PointedEars
    ___________
    [1] <URL:http://validator.w3.org/>
    Thomas 'PointedEars' Lahn, Feb 20, 2006
    #4
  5. Marcin Nowak wrote:


    > function Arrows (event)
    > {
    > code = event.keyCode;
    > if (code == 38)
    > alert('Up');
    >
    > if (code == 40)
    > alert('Down');
    >
    >
    > if (event.stopPropagation)
    > event.stopPropagation();
    > else
    > event.cancelBubble = true;
    >
    > if (event.preventDefault)
    > event.preventDefault();


    > <select id="answ" name="answ" style="width:300px"
    > multiple size="5" onkeydown="return Arrows(event);">


    Cross browser key event cancelling is difficult, if you are trying that
    with Firefox 1.0.x then trying onkeydown does help, Firefox 1.0.x can
    only cancel keys onkeypress.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Feb 20, 2006
    #5
  6. Martin Honnen wrote:

    > Cross browser key event cancelling is difficult, if you are trying that
    > with Firefox 1.0.x then trying onkeydown does help, Firefox 1.0.x can
    > only cancel keys onkeypress.


    Huh? :)

    Did you mean "... with Firefox 1.5.0.x ..., Firefox 1.0.x can only ..."?


    PointedEars
    Thomas 'PointedEars' Lahn, Feb 20, 2006
    #6
  7. Thomas 'PointedEars' Lahn wrote:

    > Martin Honnen wrote:
    >
    >
    >>Cross browser key event cancelling is difficult, if you are trying that
    >>with Firefox 1.0.x then trying onkeydown does help, Firefox 1.0.x can
    >>only cancel keys onkeypress.

    >
    > Huh? :)


    Sorry, a 'not' got lost, it should have been
    "if you are trying that with Firefox 1.0.x then trying onkeydown does
    not help, Firefox 1.0.x can only cancel keys onkeypress."


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Feb 20, 2006
    #7
  8. Marcin Nowak

    Marcin Nowak Guest

    Thomas 'PointedEars' Lahn napisał(a):
    > Marcin Nowak wrote:
    >
    >> I want to cancel up and down arrows in list (select) element.
    >> Here is the code:
    >> [...]
    >> It works in IE but doesn't in Firefox.

    >
    > "Does not work" is a useless error description. [psf 4.11]


    Event is not canceled - that is what doesn't work.
    Focus is in input element, I press down arrow. My function
    changes focus to 'option' element (first line of 'option' is
    selected) and tries to cancel event. After function ends, the
    down arrow keeps working - this event changes selection to the
    second line of 'option' element.

    Marcin
    --
    Marcin Nowak
    www.wyprawa.net .ch.o_mi.k_@.c.ho_m.ik.n_et_
    Ochrona adresu: usun kropki z wyjatkiem ostatniej, podkreslenia
    oprócz pierwszego. Address protection: remove dots except for
    the last one, underscores excluding the first one.
    Marcin Nowak, Feb 20, 2006
    #8
  9. Marcin Nowak wrote:

    > Thomas 'PointedEars' Lahn napisał(a):
    >> Marcin Nowak wrote:
    >>> I want to cancel up and down arrows in list (select) element.
    >>> Here is the code:
    >>> [...]
    >>> It works in IE but doesn't in Firefox.

    >>
    >> "Does not work" is a useless error description. [psf 4.11]

    >
    > Event is not canceled - that is what doesn't work.
    > Focus is in input element, I press down arrow. My function
    > changes focus to 'option' element (first line of 'option' is
    > selected) and tries to cancel event. After function ends, the
    > down arrow keeps working - this event changes selection to the
    > second line of 'option' element.


    Well, as Martin's posting indicates, either you are using Firefox <= 1.0.x
    (or probably any Mozilla/5.0 with rv < 1.7 for that matter[1]), or your
    Firefox 1.5.0.x is buggy and this should be reported on Bugzilla (if
    someone did not do that before). Because it does work in my Firefox
    1.5.0.1/Linux (even though it is not Valid), as I wrote already.


    PointedEars
    ___________
    [1] tested working with
    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20060205
    Debian/1.7.12-1.1
    Thomas 'PointedEars' Lahn, Feb 20, 2006
    #9
    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. AT

    Canceling Page.Load event

    AT, Aug 18, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    396
    Rick Strahl [MVP]
    Aug 19, 2005
  2. DazedAndConfused

    Canceling Subsequent events from page_load

    DazedAndConfused, Sep 22, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    518
    DazedAndConfused
    Sep 23, 2005
  3. Replies:
    0
    Views:
    383
  4. Stan Goodman

    Even older fart, even newer newbie

    Stan Goodman, Jul 3, 2003, in forum: Java
    Replies:
    11
    Views:
    676
    Stan Goodman
    Jul 4, 2003
  5. Tony
    Replies:
    7
    Views:
    333
Loading...

Share This Page