Jump to content

JQuery Field Plug-in autoadvancing one field too far

From FVue

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