473,856 Members | 1,470 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

On change event of <select> in Firefox doesn't fire when using cursor keys

I have a <select> object that i've set up an onchange event that fires
in IE fine when I use the cursor up and down in the list, but If I use
the cursor up and down in Firefox the event doesn't seem to fire until
I've left the field....If i use the mouse all is fine, only when using
the cursor keys does it not fire the onchange event in FF.
Thanks for any help in advance.
Michael

Aug 14 '05 #1
14 23285
ASM
xx********@supe rgambler.com wrote:
I have a <select> object that i've set up an onchange event that fires
in IE fine when I use the cursor up and down in the list, but If I use
the cursor up and down in Firefox the event doesn't seem to fire until
I've left the field....If i use the mouse all is fine, only when using
the cursor keys does it not fire the onchange event in FF.


What do you call cursors ? (are they arrows in scrollbar of list ?)

on my Mac, with arrow keys up and/or down of keyboard :
- IE scrolls window
- FF does what you say your IE does
--
Stephane Moriaux et son [moins] vieux Mac
Aug 14 '05 #2
xx********@supe rgambler.com wrote:
I have a <select> object that i've set up an onchange event that fires
in IE fine when I use the cursor up and down in the list, but If I use
the cursor up and down in Firefox the event doesn't seem to fire until
I've left the field....If i use the mouse all is fine, only when using
the cursor keys does it not fire the onchange event in FF.


I guess your unasked question is "How do I get consistent behaviour" -
the answer is to not use a select to fire onchange events (which is
probably not what you want to hear).

The W3C spec says that onchange should fire when the control loses focus
(provided the value has changed). IE doesn't wait, it fires as soon as
the option is selected. Firefox does wait if you use the keyboard, but
not if you use the mouse.

There are other inconsistencies between various browsers and the spec,
unfortunately the result is a bit of a mess.

If you explain what you are trying to do some other solution can be
proposed.

--
Rob
Aug 14 '05 #3
ASM
RobG wrote:
Firefox does wait if you use the keyboard, but
not if you use the mouse.
Not at all :
on my Mac with my FF (doctype transitional 4.0)
it fires on each change (by keyboard's arrow key or by click)
(scrolling list by lift or mouse well -> no change or fire)
There are other inconsistencies between various browsers and the spec,
unfortunately the result is a bit of a mess.


unfortunatly (soupir)
--
Stephane Moriaux et son [moins] vieux Mac
Aug 14 '05 #4
ASM wrote:
RobG wrote:
Firefox does wait if you use the keyboard, but not if you use the mouse.

Not at all :


Perhaps I should have said 'Firefox on Windows'.
on my Mac with my FF (doctype transitional 4.0)
it fires on each change (by keyboard's arrow key or by click)
(scrolling list by lift or mouse well -> no change or fire)


So we have variation not only between browsers, but in the same browser
on different platforms. It just gets better... :-x

[...]

--
Rob
Aug 15 '05 #5
ASM
RobG wrote:

So we have variation not only between browsers, but in the same browser
on different platforms. It just gets better... :-x


because sometimes I have some difficulties with my English ...
my test was :

<select size=4 onchange="alert (this.options[this.selectedIn dex].text);">
<option>test 1
<option>test 2
<option>test 3
<option>test 4
<option>test 5
<option>test 6
<option>test 7
</select>

hope was right subject of post (?)
--
Stephane Moriaux et son [moins] vieux Mac
Aug 15 '05 #6
ASM wrote:
RobG wrote:

So we have variation not only between browsers, but in the same
browser on different platforms. It just gets better... :-x

because sometimes I have some difficulties with my English ...


Hey, you're English is fine - certainly better then my French!
my test was :

<select size=4 onchange="alert (this.options[this.selectedIn dex].text);">

----------^^^^^^

The size attribute actually changes the behaviour of the select's
onchange event in Firefox (Windows XP). If size is 1 or not defined,
the onchange does not fire using the keyboard until the select loses
focus. With a size attribute of 2 or greater, the onchange fires every
time an option is selected with the keyboard.

Is it the same for Safari et al?

[...]

--
Rob
Aug 15 '05 #7
Thanks for the reply Rob, What I am trying to achieve is when the user
selects an item in the list, depending on the selection I want to
enable and make visible some other objects on the page. I have a real
pain in the ass supervisor who doesn't think my idea to make the
current project run in a browser versus a client / server app, and one
of her things is being able to use the keyboard and not have to switch
back and forth between keyboard and mouse.....so in my attempt to prove
myself right and her wrong, I really need this to work with just using
the keyboard down arrow and up arrow.....now one thought I did have
since the event fires when I tab away from the list, is in the function
that fires, I could set the focus to the first enabled object that the
routine just made enabled thus giving the illusion that it's doing what
I want.....

Any other thoughts or ideas would be greatly appreciated.... .

Thanks in advance!

Michael

Aug 15 '05 #8
xx********@supe rgambler.com wrote:
Thanks for the reply Rob, What I am trying to achieve is when the user
selects an item in the list, depending on the selection I want to
enable and make visible some other objects on the page. I have a real
pain in the ass supervisor who doesn't think my idea to make the
current project run in a browser versus a client / server app, and one
of her things is being able to use the keyboard and not have to switch
back and forth between keyboard and mouse.....so in my attempt to prove
myself right and her wrong, I really need this to work with just using
the keyboard down arrow and up arrow.....now one thought I did have
since the event fires when I tab away from the list, is in the function
that fires, I could set the focus to the first enabled object that the
routine just made enabled thus giving the illusion that it's doing what
I want.....

Any other thoughts or ideas would be greatly appreciated.... .

You can use a combination of onkeyup and onchange, which seems to work
OK (read thread above). You should have a reset function that returns
the form to the default onload (otherwise some browsers will show a
selected option that does not match the page content), if you want it to
act more like a form, then a reset button should be included too (see
example below).

onkeyup introduces a touch of lag, onkeydown selects the previous option
(maybe that's OK?).
<body onload="documen t.formA.reset() ;">

<script type="text/javascript">
function changeIt( el ){
var x = document.getEle mentById('xx'). firstChild;
x.data = el.options[el.selectedInde x].text;
}
</script>

<form action="" id="formA" name="formA">
<select name="selectA" size="1"
onchange="chang eIt( this );"
onkeyup ="changeIt( this );" <option selected>
<option>test 1
<option>test 2
<option>test 3
<option>test 4
<option>test 5
<option>test 6
<option>test 7
</select>
<input type="reset" onclick="
this.form.selec tA.selectedInde x=0;
changeIt(this.f orm.selectA);
">
</form>
<div id="xx">&nbsp; </div>

</body>
Thanks in advance!

Michael

--
Rob
Aug 15 '05 #9
ASM
RobG wrote:
ASM wrote:

my test was :

<select size=4 onchange="alert (this.options[this.selectedIn dex].text);">

----------^^^^^^

The size attribute actually changes the behaviour of the select's
onchange event in Firefox (Windows XP). If size is 1 or not defined,
the onchange does not fire using the keyboard until the select loses
focus.


That's right : FF, IE, Safari

click on select -> list displayed
arrow key -> moves line to line
Enter key -> validation and onchange
--
Stephane Moriaux et son [moins] vieux Mac
Aug 15 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
3111
by: K. Lobe | last post by:
list box based on a POST method to the same page. frm.cmbList.Value=Request.Form("cmbList") doesn't work. When the page loads, it reloads the <SELECT>, so not sure how to get the list to go to the item. Any ideas? many thnx,
7
2300
by: Hal Vaughan | last post by:
I have a sample script from a book ("Beginning JavaScript" by Paul Wilton) that removes or adds a choice to a <SELECT> element. The <FORM> is form1 and the <SELECT> is theDay. The example uses these lines (full text is below): if (document.form1.theDay.options.text != "Wednesday) { var days = document.form1.theDay; days.options.text = days.options.text; <snip> var option - new Option("Wednesday", 2);
2
11737
by: Aaron C | last post by:
This is kindof a newbie question, so please bear with me... I need to pass the selected option of a <select> tag into a query string, so that the page is reloaded with the selected option already chosen. This will occur with the onclick() event hander, and the query string will be processed using a server-side technology. I'm just not sure how to word the "onclick" handler. Here's what I have: <select id="StartMonth" name="StartMonth"...
4
6143
by: Bart van Deenen | last post by:
Hi all I have a script where I dynamically create multiple inputs and selects from a script. The inputs and selects must have an associated onchange handler. I have the script working fine on Firefox, Safari and Konqueror, but the onchange event just doesn't fire on IE6. Firefox's javascript console shows no errors, and the IE script debugger shows nothing. onchange is not triggered.
3
14338
by: i_dvlp | last post by:
I'm trying to replicate a fancy drop-down control (MS-egads!) with form <select><option> It doesn't look like you can specity width as an attribute or define width with CSS. It looks like my choices are to use smaller fonts or choose shorter option strings. inline: I want to put a small graphic immediately to the right of the select.
5
8748
by: Isha | last post by:
Hi all, I wanted to change the background color for only the first option in a select box, but following changed the background color for the whole dropdown box. <select name="alltags" class="select" style="background:yellow"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>
8
2750
by: dkate777 | last post by:
I have a PHP/mySQL database running, and I've realized I'm come across an awkward little bug. I have a form where a user fills out their information using populated drop down boxes. This information gets stored in the database. Then, if a user wants to edit their information later, they can go to the Edit Details page which calls up a page almost identical to the original form when they first set themselves up. Of course, the...
0
11066
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10702
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10800
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10391
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5763
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5962
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4584
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4177
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3203
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.