By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,097 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

onchange event in select element with keyboard scrolling in IE6

P: n/a
Hello,
The onchange event fires in IE6 in a SELECT element when scrolling
through the list with the up and down arrows on the keyboard. In
Firefox it only fires after you hit the enter key, which is the
behaviour I want make happen in IE.
Does anyone know how to accomplish this?
Thanks a lot
Andy Birchall
Oct 15 '08 #1
Share this Question
Share on Google+
13 Replies


P: n/a
andypb123 wrote:
The onchange event fires in IE6 in a SELECT element when scrolling
through the list with the up and down arrows on the keyboard. In
Firefox it only fires after you hit the enter key, which is the
behaviour I want make happen in IE.
Does anyone know how to accomplish this?
Keypresses trigger keyboard events. But provided your `select' element has
size 1, you are mistaken: the `change' event is triggered by changing the
selection of such a control with keyboard or pointing device (as established
here recently).
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Oct 15 '08 #2

P: n/a
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
andypb123 wrote:
>The onchange event fires in IE6 in a SELECT element when scrolling
through the list with the up and down arrows on the keyboard. In
Firefox it only fires after you hit the enter key, […]
Don’t rely on any behaviour like that. It could even be different with
the same browser on different operating systems.
Keypresses trigger keyboard events. But provided your `select' element has
size 1,
Could you explain what the value of the select element’s size attribute
has to do with this? :)
you are mistaken: the `change' event is triggered by changing the
selection of such a control with keyboard or pointing device (as established
here recently).
“Utter nonsense”

In Firefox and Google Chrome you can tab into the select control
(i.e. give it focus) and scroll through the available options with the
up/down arrow keys *without* the change event firing. It fires
* when you hit enter/return key or
* on blur

In Internet Explorer and Opera that’s impossible (you would need to
click on the select box first to show all options and then use the
up/down keys to select an option and then hit enter/return to change
it).

Safari (OS X) always shows all available options on focus, so it doesn’t
fire the change event either when you use the up/down arrows, but here
the user interface makes it obvious that an additional action is
required. IMNSHO this is the best user interface because it does away
with the differences between keyboard and pointing device as mentioned
above.
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011
Oct 16 '08 #3

P: n/a
Eric B. Bednarz <be*****@fahr-zur-hoelle.orgwrites:
Safari (OS X) always shows all available options on focus, […]
That was a mistake, it does so when using the up/down key after
focus. After that up/down highlights the previous/next option (without
selecting it).

On windows it doesn’t, but behaves like Firefox and Chrome (the latter
is rather unsurprising of course).

Oct 16 '08 #4

P: n/a
Eric B. Bednarz wrote:
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
>andypb123 wrote:
Keypresses trigger keyboard events. But provided your `select' element has
size 1,

Could you explain what the value of the select element’s size attribute
has to do with this? :)
As you could have noticed[1], if size 1 (i.e. list, not dropdown list) the
`change' event is triggered at least in newer Geckos by change of selection
alone; the control does not need to lose focus first.

[1] <news:48**************@PointedEars.de>

What is most interesting, though, is that with size=1 in that UA the
`change' event also occurs already when the selection changed, provided the
dropdown list was expanded; the control does not need to lose focus first
then. In fact, when it loses focus in that case, no additional `change'
event is created (contrary to the W3C DOM Level 2 Specification). However,
the situation is different if the dropdown list is not extended; then there
is no `change' event when the selection changes, but only when the selection
changed and the control loses focus (as specified).

So, summarized, these are my observations for Mozilla/5.0 (Windows; U;
Windows NT 5.1; en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3, using
Firebug 1.2.1 for logging events:

| selection changes | loss of focus (tab away)
| (Dn +opt. <RET>) |
----------------------+---------------------------|--------------------------
size = 1 not expanded | keydown, keypress, keyup | keydown, keypress,
| | change, blur
| |
size = 1 expanded | keydown, keypress, keyup; | keydown, keypress, blur
| keydown, keypress, |
| popuphiding, change |
| |
size 1 | keydown, keypress, change,| keydown, keypress, blur
| keyup |
>you are mistaken: the `change' event is triggered by changing the
selection of such a control with keyboard or pointing device (as established
here recently).

“Utter nonsense”
Is that so? Which Firefox version on which OS have you tested with? Which
rendering mode was used?
In Firefox and Google Chrome you can tab into the select control
(i.e. give it focus) and scroll through the available options with the
up/down arrow keys *without* the change event firing. It fires
* when you hit enter/return key or
* on blur
Apparently that is different if size 1.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Oct 16 '08 #5

P: n/a
Hi, thanks a lot for your responses.
However am I right in thinking from your posts that there is no
solution to get this working in IE6 on Windows machines?
i.e. enabling the user scroll through the list, when it is unexpanded,
with the keyboard up and down arrows.

Below is simple HTML code which demostrates the problem. In IE6 the
alert box fires up when the user scrolls through the select list with
the up and down arrows. In Firefox (and other browsers mentioned
above) it doesn't fire until you hit the enter key.
Thanks
Andy Birchall

<html>
<head>
<script type="text/javascript">
function alertMsg(id) {
alert(document.getElementById(id).value);
}
</script>
</head>
<body>
Choose your animal:
<select id="pets" name="animals" onchange="alertMsg(this.id)">
<option value="Please">Please select an animal</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="budgie">Budgie</option>
<option value="turtle">Turtle</option>
</select>
</body>
</html>
Oct 17 '08 #6

P: n/a
andypb123 wrote:
Hi, thanks a lot for your responses.
You are welcome.
However am I right in thinking from your posts that there is no
solution to get this working in IE6 on Windows machines?
As I have said, you can listen to keyboard events instead. RTFM.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Oct 17 '08 #7

P: n/a
On 17 Oct, 22:39, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
andypb123 wrote:
Hi, thanks a lot for your responses.

You are welcome.
However am I right in thinking from your posts that there is no
solution to get this working in IE6 on Windows machines?

As I have said, you can listen to keyboard events instead. *RTFM.

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
* -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
That doesn't help beacuse I want the user to be able to scroll trough
the list with the mouse AND the keyboard and to be able to select an
option with either. With Firefox it works fine with the keyboard or
the mouse by just catching the "onchange" event but unfortunatley I
have to support IE6 as well with this particular app. I have tried
several variations on catching "keyup", "keydown" and "onchange"
events but haven't been able to get anything to work.
Thanks
Oct 22 '08 #8

P: n/a
rf

"andypb123" <ab*******@gmail.comwrote in message
news:eb**********************************@j68g2000 hsf.googlegroups.com...
On 17 Oct, 22:39, Thomas 'PointedEars' Lahn <PointedE...@web.de>

....
>PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
>That doesn't help
FFS what doesn't help? Using "any version of Microsoft Frontpage" doesn't
help?

Learn to trim correctly please.
Oct 22 '08 #9

P: n/a
andypb123 wrote:
Thomas 'PointedEars' Lahn wrote:
>andypb123 wrote: [...]
>>However am I right in thinking from your posts that there is no
solution to get this working in IE6 on Windows machines?
As I have said, you can listen to keyboard events instead. RTFM.

[signatures]
Please learn to quote. How to post properly is described, last but not
least, in the FAQ of this newsgroup: <http://jibbering.com/faq/>. Pointers
to the FAQ are posted this often here (both by regulars and automatically)
that they can hardly go unnoticed.
That doesn't help beacuse I want the user to be able to scroll trough the
list with the mouse AND the keyboard and to be able to select an option
with either.
So what? Listening to keyboard events instead of `onchange' does not
prevent users from using the mouse. And there are also mouse events.
RTFM, finally.
With Firefox it works fine with the keyboard or the mouse by just
catching the "onchange" event but unfortunatley I have to support IE6 as
well with this particular app.
That doesn't matter.
I have tried several variations on catching "keyup", "keydown" and
"onchange" events but haven't been able to get anything to work.
That is an utterly useless statement.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Oct 22 '08 #10

P: n/a
FYI there is an easy 'fix' for this, which I'm posting for the benifit
of the newsgroup. When the focus is on the select list, hit the Alt
key + the up or down arrow key, which expands the list, which you can
then scroll through using the up/down arrow keys.
AB
Oct 29 '08 #11

P: n/a
andypb123 wrote:
FYI there is an easy 'fix' for this, which I'm posting for the benifit
of the newsgroup. When the focus is on the select list, hit the Alt
key + the up or down arrow key, which expands the list, which you can
then scroll through using the up/down arrow keys.
Yes, I said that in <news:48**************@PointedEars.dealready.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Oct 29 '08 #12

P: n/a
On 29 Oct, 18:13, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
andypb123 wrote:
FYI there is an easy 'fix' for this, which I'm posting for the benifit
of the newsgroup. When the focus is on the select list, hit the Alt
key + the up or down arrow key, which expands the list, which you can
then scroll through using the up/down arrow keys.

Yes, I said that in <news:48**************@PointedEars.dealready.
No you didn't.
Nov 4 '08 #13

P: n/a
andypb123 wrote:
Thomas 'PointedEars' Lahn wrote:
>andypb123 wrote:
>>FYI there is an easy 'fix' for this, which I'm posting for the benifit
of the newsgroup. When the focus is on the select list, hit the Alt
key + the up or down arrow key, which expands the list, which you can
then scroll through using the up/down arrow keys.
Yes, I said that in <news:48**************@PointedEars.dealready.

No you didn't.
I talked about differences in events between expanded and not expanded
`select' elements of size=1 there. Alt+(Arrow (Up|Down)) is one way to
expand those controls in some user agents, and in particular in the ones
in question here.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Nov 4 '08 #14

This discussion thread is closed

Replies have been disabled for this discussion.