Firefox: select onChange() when using keyboard - a solution
Working on a CartWeaver site, modifying part of the routine whereby different prices are shown on the page when selecting various options from a dropdown list on the product details page, I noticed that in Firefox, the 'onchange' event of the select list only fires if using a mouse, or when tabbing out of the select box using the keyboard ( select list loses focus).
I guess it's always been this way, I just haven't noticed until now. Fortunately there is a very easy fix - append the 'losing of focus' to the 'onkeyup' event, so that either keyboard or mouse have the same effect, causing the browser to register the 'change'.
Original select list is like this:
<select name="sel" id="sel#i#" onchange=" ( function here )" >
Adding just a bit of code for the onkeyup, like so:
<select name="sel" id="sel#i#" onchange=" ( function here )" onkeyup="this.blur();this.focus();">
we now have a list that loses then regains focus everytime a key is pressed (while it has focus), i.e. using the keyboard to move up or down through the options now triggers a split-second loss and regaining of focus, which is enough to trigger the 'onchange()' in firefox. I love a good easy fix!
Thanks to Sanket Vasa for the tip
I'd also recommend using a debouncing technique on your keyup event, the better handle rapid keyboard entry events from always firing. I wrote an article covering John Hahn's "debounce" function a while back:
http://blog.pengoworks.com/index.cfm/2009/3/24/Man...
Make sure to check out the live demo to see exactly what it does (and to see why it's useful.)
so, instead you suggest
onkeyup="this.change();"
?
I agree it is definitely a hacky hack, but it works! (as far as i can tell so far, anyway)
Yeah, calling the change() event isn't really hacky at all. All your doing is telling the browser to firing off the change() event when someone also presses a key.
I do recommend taking a look at the debouncing technique. Depending on how much overhead is in the change() event, it can noticeably make the keypressing slower. Using the debounce gives you a way to fire the event only when the user is done making changes--which is really want you want anyway.
>> a way to fire the event only when the user is done making changes--which is really want you want anyway.
actually in this usage, we want it to change as each <option> is highlighted, rather than when the user is done selecting. Normally though, i agree, that would be preferred.
Works just fine in IE. In Firefox, the onkeyup focus works just fine to move the cursor along. But, I can't get the focus to work when validation fails in the onchange.
This works for both IE and Firefox
function moveOnMax(field,nextFieldID){
if(field.value.length >= field.maxLength){
document.getElementById(nextFieldID).focus();
}
This only works in IE
function checkForNumber(field, myID)
{
var code = field.value;
for (i = 0; i < field.value.length; i++)
{
if (code.charAt(i) < "0" || code.charAt(i) > "9")
{
window.alert("Your telephone number must be numerals!");
field.value = "";
document.getElementById(myID).focus();
return false;
}
}
if (field.name == "phone")
{
if(field.value.length != 4)
{
window.alert("Your telephone number is missing a number!");
field.value = "";
document.getElementById(myID).focus();
return false;
}
}
else
{
if (field.value.length !=3)
{
window.alert("Your telephone number is missing a number!");
field.value = "";
document.getElementById(myID).focus();
return false;
}
}
return true;
}
<input type="text" name="area" id="area" size="3" maxlength="3"
onchange="return checkForNumber(this,'area');" />)
<input type="text" name="exchange" id="exchange" size="3" maxlength="3"
onchange="return checkForNumber(this,'exchange');" onkeyup="moveOnMax(this,'phone')" />
<input type="text" name="phone" id="phone" size="4" maxlength="4"
onchange="return checkForNumber(this,'phone');" onkeyup="moveOnMax(this,'accommodations')" />
Any suggestions as to what I am doing wrong?
}
P.S. The best torrents search engine.
http://www.queentorrent.com