Connecting Tech Pros Worldwide Forums | Help | Site Map

Even canceling in Firefox

Marcin Nowak
Guest
 
Posts: n/a
#1: Feb 20 '06
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.

VK
Guest
 
Posts: n/a
#2: Feb 20 '06

re: Even canceling in Firefox



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

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

Thomas 'PointedEars' Lahn
Guest
 
Posts: n/a
#3: Feb 20 '06

re: Even canceling in Firefox


VK wrote:
[color=blue]
> Marcin Nowak wrote:[color=green]
>> <select id="answ" name="answ" style="width:300px"
>> multiple size="5" onkeydown="return Arrows(event);">[/color]
>
> SELECT supports by specs onfocus, onchange, onblur.[/color]

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 --"
| >
[color=blue]
> Whatever and *however* it supports atop of it is up to the fantasy of
> a particular browser producer.[/color]

True, if you read that statement in context. False otherwise.
[color=blue]
> In your case I would make a CSS widget instead.[/color]

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
Guest
 
Posts: n/a
#4: Feb 20 '06

re: Even canceling in Firefox


Marcin Nowak wrote:
[color=blue]
> 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.[/color]

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

<URL:http://jibbering.com/faq/#FAQ4_43>
[color=blue]
> Any ideas how to fix it?[/color]

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/ev...lect-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/>
Martin Honnen
Guest
 
Posts: n/a
#5: Feb 20 '06

re: Even canceling in Firefox




Marcin Nowak wrote:

[color=blue]
> 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();[/color]
[color=blue]
> <select id="answ" name="answ" style="width:300px"
> multiple size="5" onkeydown="return Arrows(event);">[/color]

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/
Thomas 'PointedEars' Lahn
Guest
 
Posts: n/a
#6: Feb 20 '06

re: Even canceling in Firefox


Martin Honnen wrote:
[color=blue]
> 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.[/color]

Huh? :)

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


PointedEars
Martin Honnen
Guest
 
Posts: n/a
#7: Feb 20 '06

re: Even canceling in Firefox




Thomas 'PointedEars' Lahn wrote:
[color=blue]
> Martin Honnen wrote:
>
>[color=green]
>>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.[/color]
>
> Huh? :)[/color]

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/
Marcin Nowak
Guest
 
Posts: n/a
#8: Feb 20 '06

re: Even canceling in Firefox


Thomas 'PointedEars' Lahn napisał(a):[color=blue]
> Marcin Nowak wrote:
>[color=green]
>> 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.[/color]
>
> "Does not work" is a useless error description. [psf 4.11][/color]

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.
Thomas 'PointedEars' Lahn
Guest
 
Posts: n/a
#9: Feb 20 '06

re: Even canceling in Firefox


Marcin Nowak wrote:
[color=blue]
> Thomas 'PointedEars' Lahn napisał(a):[color=green]
>> Marcin Nowak wrote:[color=darkred]
>>> 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.[/color]
>>
>> "Does not work" is a useless error description. [psf 4.11][/color]
>
> 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.[/color]

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
Closed Thread