andypb123
asked on
JavaScript "onchange" event in SELECT element with keyborad scrolling
Hello,
The "onchange" event fires in IE 6.0 in a HTML SELECT element when scrolling through the unexpanded list with the up and down arrows on the keyboard.
In Firefox it lets you scroll through the list with the arrow keys and only fires after you hit the enter key, which is the behaviour I would expect.
Do you know how I could simulate this in IE 6.0?
I've attached a simple HTML code snippet which demostrates the problem.
Thanks a lot
Andy Birchall
The "onchange" event fires in IE 6.0 in a HTML SELECT element when scrolling through the unexpanded list with the up and down arrows on the keyboard.
In Firefox it lets you scroll through the list with the arrow keys and only fires after you hit the enter key, which is the behaviour I would expect.
Do you know how I could simulate this in IE 6.0?
I've attached a simple HTML code snippet which demostrates the problem.
Thanks a lot
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
My apologies, Andy. I was sure I had posted this back to you this morning.
Here is your solution.
It gives a popup with the selected object either when clicking or when hitting enter.
Regards,
Geoff
Here is your solution.
It gives a popup with the selected object either when clicking or when hitting enter.
Regards,
Geoff
<html>
<head>
<script type="text/javascript">
function alertMsg(id, E, isClick) {
var runCode=false;
if(isClick==1){
runCode=true;
} else {
var key=e.which
if(!key) key=event.keyCode;//cover for IE no event being passed
if(key==13) runCode=true;
}
if(runCode){ //for the enter key or the right mouse click
alert(document.getElementById(id).value);
}
}
</script>
</head>
<body>
Choose your animal:
<select id="pets" name="animals" onkeyup="alertMsg(this.id, event,0)" onchange="alertMsg(this.id, event,1)">
<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>ASKER
Hi Geoff, thanks a lot for your posting. However if I load this code into IE6.0 the popup still opens when the list is scrolled through with the up/down keyboard arrows. I think the "onchange" event is being fired with these keyboard actions as well as the "keyup" event.
Cheers
Andy
Cheers
Andy
Ok. I was testing on IE7. All we have to do then is check for the keypress in the mouse click section. What I did was checked for keystroke in FF, then checked for it in IE, then if it was still not found assumed a mouseclick.
I did not test this code, as it is a slight modification of previous code, but intheory it should work as you desire.
Let me know. I will get this working for you today.
Geoff
I did not test this code, as it is a slight modification of previous code, but intheory it should work as you desire.
Let me know. I will get this working for you today.
Geoff
<html>
<head>
<script type="text/javascript">
function alertMsg(id, e, isClick) {
var runCode=false;
if(isClick==1){
var key=e.which
if(!key) key=event.keyCode;//cover for IE no event being passed
if(!key) runCode=true;
} else {
var key=e.which
if(!key) key=event.keyCode;//cover for IE no event being passed
if(key==13) runCode=true;
}
if(runCode){ //for the enter key or the right mouse click
alert(document.getElementById(id).value);
}
}
</script>
</head>
<body>
Choose your animal:
<select id="pets" name="animals" onkeyup="alertMsg(this.id, event,0)" onchange="alertMsg(this.id, event,1)">
<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>
Hi Geoff, Im a colleague of andypb123. We have tried your suggested code but unfortunately the event still fires within IE 6 when using the keyboard cursor keys. Thanks for your suggestion, any further ideas?
You are filtering onchange with the key==13 to determine if enter has been hit? Quite honestly that is the only thing which occurs to me. I have no access to IE6 or I would code on that to test. Any option for upgrading to IE7 on this? What should be happening in if (!key) runCode=true is that it checks for any keypress, and if it finds none...
Ok. I went back and played with this. I added a global mouse click capture which sets a variable to true, then checks that variable. Again, it works in IE7, and should work in Firefox. Let me know how it works out with IE6 and with firefox.
Thanks,
Geoff
Ok. I went back and played with this. I added a global mouse click capture which sets a variable to true, then checks that variable. Again, it works in IE7, and should work in Firefox. Let me know how it works out with IE6 and with firefox.
Thanks,
Geoff
<html>
<head>
<script type="text/javascript">
if (parseInt(navigator.appVersion)>3) {
document.onmousedown = mouseDown;
if (navigator.appName=="Netscape")
document.captureEvents(Event.MOUSEDOWN);
}
var mouse=false;
function alertMsg(id, e) {
var runCode=false;
var key=e.which
if(!key) key=event.keyCode;//cover for IE no event being passed
if(key==13) runCode=true;
if(!key){ //check for mouse click
if(mouse) runCode=true;
}
if(runCode){ //for the enter key or the right mouse click
alert(document.getElementById(id).value);
changed=false;
}
mouse=false;
}
function mouseDown(e){
var evnt;
evnt=e; //fireforx
if(!evnt) evnt=event; //ie
if (parseInt(navigator.appVersion)>3) {
var clickType=1;
if (navigator.appName=="Netscape") clickType=e.which;
else clickType=event.button;
//if clicking on select box...
var targ=evnt.srcElement; //ie
if (!targ) targ=evnt.target; //firefox
if (targ.id=="pets"){
if (clickType==1) mouse=true; //left click
if (clickType!=1) mouse=true; //right click
} else {
mouse=false;
}
}
return true;
}
</script>
</head>
<body>
Choose your animal:
<select id="pets" name="animals" onChange="alertMsg(this.id, event)" onKeyup="alertMsg(this.id, event)">
<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>
Hello Geoff, thanks for the last posting. We tried it and it does work in IE6 but not Firefox unfortunately.
However whilst looking around we came across this blog entry: http://www.themaninblue.com/writing/perspective/2004/10/19/ which provides a solution.
However in viewing the comments there appears to be a simpler 'fix', which is to use the Alt + arrrow key to expand the select list, which you can then scroll through with the arrow keys. We didn't know about this keyboard behaviour but are now going to use this as our solution as this is expected keyboard behaviour and saves us implementing a lot of JavaScript code.
Thanks very much for your contrubutions. It was a good learning experience!
CB
However whilst looking around we came across this blog entry: http://www.themaninblue.com/writing/perspective/2004/10/19/ which provides a solution.
However in viewing the comments there appears to be a simpler 'fix', which is to use the Alt + arrrow key to expand the select list, which you can then scroll through with the arrow keys. We didn't know about this keyboard behaviour but are now going to use this as our solution as this is expected keyboard behaviour and saves us implementing a lot of JavaScript code.
Thanks very much for your contrubutions. It was a good learning experience!
CB
I am glad you found a solution (and also that the code I worked out worked in IE6 - a little tweaking would have fixed it for firefox). The alt+arrow is something I never considered since I thought you were dealing with everyday users etc. who would not be expected to know those tricks (or to follow them).
I also enjoyed the challenge, and although the javascript seems a nuisance I still believe it the best method to follow (script is more reliable than users).
If you want I can certainly play with this a bit more to enable Firefox to work as well, but I understand your wanting to avoid it after this month long odyssey to complete a "simple" request. Hmmm... we can capture the keydown, maybe we can use that to automate the alt+keydown event....
Let me know.
Geoff
I also enjoyed the challenge, and although the javascript seems a nuisance I still believe it the best method to follow (script is more reliable than users).
If you want I can certainly play with this a bit more to enable Firefox to work as well, but I understand your wanting to avoid it after this month long odyssey to complete a "simple" request. Hmmm... we can capture the keydown, maybe we can use that to automate the alt+keydown event....
Let me know.
Geoff
Hi Geoff, we have recommended the Alt + arrow solution to the project owners and are waiting to see if that's aceptable. I suspect it might be as we are only considering users who have to navigate with the keyboard in this case and so would know about this behaviour. Sorry we didn't make that clear originally. Will let you know if we do decide to go the script route.
Thanks a lot!
CB
Thanks a lot!
CB
Ok. That's understandable. Let me know and we'll see what can be done. I'll save the code on my system so if we ever have to revive it it'll be there.
Geoff
Geoff
ASKER
I don't think I made myself entirely clear in my first post. I should have said that i wish the user to be able to scroll through the list with the keyboard AND the mouse and to enter values with either. i.e by hitting return or the mouse button.
Thanks
Andy