Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > On change event of <select> in Firefox doesn't fire when using cursor keys

Reply
Thread Tools

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

 
 
xxbmichae1@supergambler.com
Guest
Posts: n/a
 
      08-14-2005
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

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      08-14-2005
http://www.velocityreviews.com/forums/(E-Mail Removed) 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
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      08-14-2005
(E-Mail Removed) 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
 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      08-14-2005
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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-14-2005
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...

[...]

--
Rob
 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      08-15-2005
RobG wrote:
>
> So we have variation not only between browsers, but in the same browser
> on different platforms. It just gets better...


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

<select size=4 onchange="alert(this.options[this.selectedIndex].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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-15-2005
ASM wrote:
> RobG wrote:
>
>>
>> So we have variation not only between browsers, but in the same
>> browser on different platforms. It just gets better...

>
>
> 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.selectedIndex].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
 
Reply With Quote
 
xxbmichae1@supergambler.com
Guest
Posts: n/a
 
      08-15-2005
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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      08-15-2005
(E-Mail Removed) 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="document.formA.reset();">

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

<form action="" id="formA" name="formA">
<select name="selectA" size="1"
onchange="changeIt( 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.selectA.selectedIndex=0;
changeIt(this.form.selectA);
">
</form>
<div id="xx">&nbsp;</div>

</body>

> Thanks in advance!
>
> Michael
>



--
Rob
 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      08-15-2005
RobG wrote:
> ASM wrote:
>>
>> my test was :
>>
>> <select size=4 onchange="alert(this.options[this.selectedIndex].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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to tell if cursor is sqlite.Cursor or psycopg2.Cursor dmaziuk Python 3 01-25-2011 04:52 AM
Declare Cursor error while implementing SCROLL CURSOR invy C Programming 4 12-28-2006 02:35 PM
How to link foreign keys & primary keys using python? Harry George Python 9 06-13-2006 06:29 AM
Onmouseover Event, Cursor property not working with Netscape or Firefox Jordan ASP .Net 1 06-10-2005 03:59 PM
Changing DEFAULT cursor to WAIT cursor in ASP =?Utf-8?B?VG9tYXMgS2VwaWM=?= ASP .Net 1 04-05-2005 07:42 PM



Advertisments