Menu
THE PROBLEM:
On IE, when a user clicks into a SELECT control and clicks on any option in the list, then moves the mouse out of the SELECT control, focus remains in the SELECT control until the user clicks elsewhere on the page. Firefox handles this much more gracefully. Problem is, our users are clicking an option, then using their mouse wheel to scroll to down the page. What is actually happening is they are scrolling through the options in the SELECT and, inadvertantly, selecting another OPTION in the list. They often don’t notice this and submit forms with bogus options.
MY SOLUTION, SO FAR:
I have written the following code, in hopes of including it at the end of each of my HTML/JSP files to work around this problem:
<script language=”javascript”>
function blurSelect()
{
this.blur();
document.getElementById(“bcmInd”).focus();
return true;
}
/* loop through all form fields looking for SELECTs, when I find one, if it does
* blurSelect()
var selectCount = 0;
for (formCnt=0; formCnt<document.forms.length; formCnt++)
{
for (elementCnt=0; elementCnt<document.forms[formCnt].elements.length; elementCnt++)
{
if (document.forms[formCnt].elements[elementCnt].tagName == “SELECT” && document.forms[formCnt].elements[elementCnt].onchange==null)
{
document.forms[formCnt].elements[elementCnt].onchange=blurSelect;
}
}
}
</script>
MY QUESTIONS:
1.
I am using the onchange event on the SELECT control to trigger the call to blur. It does not fire if the user clicks into the SELECT and does not change the selected value, however. I tried onclick (blurs when dropping down the list), onmouseout (blurs when moving into the selectable options) and onmousewheel (never seems to fire at all). Any suggestions on a better event to use?
Just calling blur() on the SELECT control does not actually work. It seems I must call focus() on an actual visible form element to remove focus from the SELECT. This is a problem because I’m trying to make this generic and I don’t have a form element on every screen with the same name. It seems like this should be possible because when you click on whitespace on the form, it removes focus from the SELECT, without placing it on a visible form element. It’s also a problem because some of my forms are long and sending focus to a form field willy-nilly can scroll the page up or down . . . very annoying.
Any help is much appreciated.
Joe