Solved

JavaScript "onchange" event in SELECT element with keyborad scrolling

Posted on 2008-10-17
15
2,224 Views
Last Modified: 2009-12-01
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
<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>

Open in new window

0
Comment
Question by:andypb123
  • 6
  • 3
  • 3
  • +2
15 Comments
 
LVL 18

Assisted Solution

by:Morcalavin
Morcalavin earned 200 total points
Comment Utility
You can just add the onkeyup event.  It will fire for any event, not just the up and down keys, but that usually isn't an issue with select boxes.
onkeyup="alertMsg(this.id)"
0
 
LVL 8

Assisted Solution

by:aldanch
aldanch earned 150 total points
Comment Utility

<html>

<head>

<script type="text/javascript">

function alertMsg(id) {

        alert(document.getElementById(id).value);

}

function checkForArrow(e)

{

	var keynum;

	var keychar;

	var numcheck;
 

	if(window.event) // IE

	{

		keynum = e.keyCode;

	}

	else if(e.which) // Netscape/Firefox/Opera

	{

		keynum = e.which;

	}

	if(keynum == 13) { alert(document.getElementById('pets').value) };

	return;

}

</script>

</head>

<body>

Choose your animal:

<select id="pets" name="animals" onkeydown="checkForArrow(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>

Open in new window

0
 
LVL 10

Assisted Solution

by:GeoffSutton
GeoffSutton earned 150 total points
Comment Utility
Andy,

The simplest way to do this is with an if statement.  See attached code.  Make sure to add the second event parameter to the function call.

Keep in mind that I tested this ONLY in IE, but should work the same in FF.

Hope this helps,

Geoff
<html>

<head>

<script type="text/javascript">

function alertMsg(id, key) {

	if(!key) key=event.keyCode;//gets keycode in IE

	if(key==13){ //for the enter key

	        alert(document.getElementById(id).value);

	}

}

</script>

</head>

<body>

Choose your animal:
 

<!-- done forget the event.which, captures the firefox event keycode -->
 

<select id="pets" name="animals" onkeyup="alertMsg(this.id, event.which)">

        <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>

Open in new window

0
 
LVL 18

Assisted Solution

by:Morcalavin
Morcalavin earned 200 total points
Comment Utility
It's worth noting that the up/down keys are not the only way to cycle through the list of select boxes.  Some browsers support the left and right keys.  Also, pressing alpha numeric keys(and some others) will attempt to cycle through the list and select the one that matches.

If you want the list to fire whenever the selected index changes by use of the keyboard, the first suggestion will work.  If you only want it to fire when selected keypressess are used, use the second or third suggestion and adapt the key codes to your needs.
0
 

Author Comment

by:andypb123
Comment Utility
Hi thanks a lot for your responses, they have given me some ideas, which I am now working on, but unfortunately not the complete solution I was looking for.
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
0
 

Accepted Solution

by:
andypb123 earned 0 total points
Comment Utility
Haven't found a solution to this yet and the ones given are not a solution, as I describe above. I'm sure there is on with a bit of fancy JavaScript involving keyup or keydown etc. but I haven't had time to work it out yet. I'm going to close this question. Thanks for your help folks!
Andy
0
 
LVL 10

Expert Comment

by:GeoffSutton
Comment Utility
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
<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>

Open in new window

0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:andypb123
Comment Utility
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
0
 
LVL 10

Expert Comment

by:GeoffSutton
Comment Utility
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
<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>

Open in new window

0
 

Expert Comment

by:chubbybunny
Comment Utility
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?
0
 
LVL 10

Expert Comment

by:GeoffSutton
Comment Utility
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
<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>

Open in new window

0
 

Expert Comment

by:chubbybunny
Comment Utility
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
0
 
LVL 10

Expert Comment

by:GeoffSutton
Comment Utility
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
0
 

Expert Comment

by:chubbybunny
Comment Utility
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
0
 
LVL 10

Expert Comment

by:GeoffSutton
Comment Utility
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
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now