JQuery Field Plug-in autoadvancing one field too far
Problem
Using jsquery.field.js-0.9.3, and having multiple fields:
+----+ +----+ +----+ | | | yy | | | +----+ +----+ +----+ id=aa id=bb id=cc
each with attributemaxlenght="2". Now if I do a quick type of two characters (e.g. "qr") in field #aa, the focus advances to field #bb after having typed the "q". Now field #bb is receiving the `keyUp' event for character "r"! And since field #bb already has reached its maximum length (i.e. contains "yy"), focus advances to field #cc.
The problem does not occur if I type "qr" slowly.
Strange, but there seems to be some kind of event buffer erroneously coupling the keyUp of "r" to the wrong element.
Environment
- Firefox-3.5
- jquery.field.js-0.9.3
- Ubuntu-9.04
Solution
Added a global variable `autoAdvanceField' to contain the id of the next field receiving focus. Now if this next field receives an erroneous `keyUp' event, it knows it can stop auto-advancing here.
Also detection of a `maxlength' containing -1 (Firefox-3.5?) is fixed here.
--- jquery.field.js.orig 2010-02-04 20:15:32.000000000 +0100
+++ jquery.field.js 2010-02-04 20:23:43.000000000 +0100
@@ -373,13 +373,22 @@
// if the user tabs to the field, exit event handler
// this will prevent movement if the field is already
// field in with the max number of characters
- if( isNaN(iMaxLength) || ("|9|16|37|38|39|40|".indexOf("|" + e.keyCode + "|") > -1) ) return true;
+ if(
+ isNaN(iMaxLength) ||
+ iMaxLength == -1 ||
+ ("|9|16|37|38|39|40|".indexOf("|" + e.keyCode + "|") > -1) ||
+ window.autoAdvanceFieldId == $field.attr("id")
+ ) {
+ window.autoAdvanceFieldId = null;
+ return true;
+ }
// if the value of the field is greater than maxlength attribute,
// then move the focus to the next field
if( $field.getValue().length >= $field.attr("maxlength") ){
// move to the next field and select the existing value
var $next = $field.moveNext().select();
+ window.autoAdvanceFieldId = $next.attr("id")
if( $.isFunction(callback) ) callback.apply($field, [$next]);
}
}
See also
- http://plugins.jquery.com/project/issues/field
- The jQuery plugins repository, containing list of issues as well