Even canceling in Firefox

[Marcin Nowak]

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 [email protected]_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]

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

 

[Thomas 'PointedEars' Lahn]

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]

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]

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

 

[Martin Honnen]

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.

 

[Thomas 'PointedEars' Lahn]

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

 

[Martin Honnen]

Martin Honnen wrote:



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

 

[Marcin Nowak]

Thomas 'PointedEars' Lahn napisał(a):

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 [email protected]_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]

Thomas 'PointedEars' Lahn napisał(a):

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