473,225 Members | 1,276 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

onchange event in select element with keyboard scrolling in IE6

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
13 8697
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
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
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
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Covad | last post by:
Hi all, For some reason my change() function is only called when the page loads. I'd much rather it gets called when the select changes. Here's the code: window.onload = init; function...
3
by: Lee Mundie | last post by:
Hi there, Simple problem here but can't seem to fix it! Okay, I have a select list from which people choose avatars... the list is option values ie. <option>Worm</option> ...
10
by: Ryan McGeary | last post by:
In a <select> drop-down, the onchange event isn't called when scrolling through the dropdown using the mouse-wheel and when crossing over a new <optgroup>. Using the example below, notice how...
4
by: john woo | last post by:
Hi if there are 3 selections, named location,department,employee, the relationshipe is, in a location there are departments, in a department there are employees, so for a selected location,...
8
by: Yeah | last post by:
I wish to use a drop box where each Option will not take the user to a web page - but a certain location on the same page the drop box exists. For example, Option 1 would take the user to "Chapter...
2
by: crjunk | last post by:
I have a javascript that will output a message telling the user that changes were made. It halfway works. If the user enters in a number, the TextChanged function executes and displays the...
13
by: aundro | last post by:
Hello, I've been looking on the web for a solution to this problem: I create a set of checkboxes, and 2 buttons: - one is labeled "All" - the other is labeled "None" Clicking "All" is...
3
by: b_naick | last post by:
I realize that the onChange event for a drop down can be trapped as follows: <select name="myDropDown" onChange="somefunc"> Is it possible to trap the onChange event outside of the select...
18
by: Mike Will via WebmasterKB.com | last post by:
I need some help with an onchange event for one of my select boxes on my form. I need to select a value from the box and use that value in the query that will produce results for another select...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.