Software Developer, Media Nut, and Proud Father of Two

Thanks for this plugin!
Some suggestions:

I'd like to have a filter for (possibly localized) decimal numbers.
How about an option to give a custom formatter callback?
E.g. in your case statement something like this:

...
default:
if (typeof(defaults.format) == 'function')
var val = defaults.format.apply(this, [val]);
break;
...


Also, It'd be nice if the plugin could find a default target using the default tab order on its own, sort of like the fluidTyping plugin.

This exactly what i was looking for. Thanks for saving my time...

I was looking for something like this, I was not even sure this was possible to do. I love that the Backspace button works :)

Suggestions for next version if you want to update would be to add support for pasting, as of now if I paste in my phone number it only puts in the first part and it does not jump to the next fields automatically.

Thanks a lot.

Guy

I was trying numeric which doesnt allow decimal. So i just add

case 'decimalNumber':
var pattern = new RegExp('[^0-9\.]+', 'g');
var val = val.replace(pattern, '');
break;

Can someone give me a regualer expression which just allow a number followed by dot and than a number (22.4 / 22.34)

it should not allow (23. / 23.43.24 etc)

Good Luck!!!

This exactly what i was looking for. Thanks for saving my time...

I have a small problem - I am using your auto-tab function to do its stuff in a payment form - autotabbing through the credit card field etc.... I am using the max length field as described and it all works almost... When a user selects AMEX from the card type drop down, I use jquery to reissue your autotab commands with a shorter lenght for the credit card field and a longer lenght for the CCV. I have similar for Diners (card lenght 14 instead of 16) and Diners CCV is the same as Visa and MC at 3. Now the odd thing it ALL works -for all the different card types etc, except for the change in CCV for the AMEX from 3 to 4.... it is really starting to bug me as I cant seem to finger what is wrong - especially when the variable length Credit Card numbers work....
here is the sample jquery:
if($('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_DropDownListCreditCard').val() == "AmericanExpress")
{
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber1').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber2', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber2').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber3', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber3').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber4', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber4').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCMonth', maxlength: 3 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCMonth').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCYear', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCYear').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_TextBoxCardHolderName', maxlength: 4 });
}
else if ($('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_DropDownListCreditCard').val() == "Diners")
{
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber1').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber2', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber2').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber3', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber3').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber4', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber4').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCMonth', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCMonth').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCYear', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCYear').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_TextBoxCardHolderName', maxlength: 3 });
}
else
{
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber1').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber2', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber2').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber3', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber3').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber4', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCNumber4').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCMonth', maxlength: 4 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCMonth').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCYear', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CCYear').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC', maxlength: 2 });
$('#ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC').autotab({ target: 'ctl00_cphMainMemberContent_signup1_CreditCardInfo1_TextBoxCardHolderName', maxlength: 3 });
}

FYI the credit card number is broken into 4 imputs and the CCV is ctl00_cphMainMemberContent_signup1_CreditCardInfo1_CSC again just an input. The Card Holder Name is a asp.net Text Box, but i figure that by the time jquery is seeing it - it has been rendered as an input anyway...

Do you have any ideas????

Wonderful script - thank you.

However, I was writing a simple form validation script that relied on the blur(); method, which this auto-tab plug-in does not trigger when it hops from field to field.

Simple enough fix, though: insert this.blur(); right before each instance of both defaults.previous.focus(); & defaults.target.focus(); (three total, I believe). Now my blur() handlers are called when the fields auto-tab.

Man I love jQuery!

Firstly, I'd like to say "WOW! Great script!!" - I love it, and it works great!!

However, it would be nice if it could also do "Sentence Case". So converting first character to upper-case and remainder characters to lower-case. This could might be handy for 'First Name', 'Last Name', 'City' type of input fields. Hence when the user types in "sandra" it could use Ajax to convert the first letter into upper-case and leaving the rest alone, ex: "Sandra"

Adding some additional smarts, you could also have it capitalize every first character of a sentence. So in a text box which allows the user to type in a comment or something would automatically convert the first character into upper-case where it resides before a period ".", example: "this is a test. xbox rules!" would be converted to "This is a test. Xbox rules!"

This link has this, which would be nice to include it into your Ajax/jQuery plugin: http://javascript.internet.com/forms/sentence-case.html

Can't wait to try your next creation! Cheers.

very helpful stuff here.When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial I'll show you how to use jQuery to do some instant checking on an example comment form.

Excellent plugin, very well done. I offer several comments to help keep this plugin at its best.

For the record, my test base for the following is Autotab 1.1b (rev. 2008-09-10), jQuery 1.2.6 (rev. 2008-05-24), Firefox 2.0.0.20, and Windows XP SP2. That said, these comments reflect Autotab's interaction with the jQuery core and thus apply across platforms.

I have two suggestions regarding the selection of input elements based on their 'name' attribute. Unfortunately, at least in 1.1b, this method is broken.

1) On a somewhat syntactical note, the best-practice technique for selecting objects by name uses quotes (single or double) to delineate the name. This can be seen in the official jQuery example of such a selection at <http://docs.jquery.com/Selectors/attributeEquals#attributevalue>. In the case of Autotab, the problem arises on line 19 of 1.1b. Updated code should read:

var check_name = $('input[name="' + name + '"]');


2) Unfortunately, that is not what is preventing the selection of input elements by their 'name' attribute. Rather, the tests for a defined object on lines 21 and 23 of 1.1b are not valid. The jQuery model of element selection does not, although one might anticipate it, return 'undefined' when no object is found for a given criteria. It instead returns a valid jQuery object of length 0. Thus, in order to determine whether a valid element was indeed found, one needs to check the jQuery object for non-zero length.

It is obvious immediately that checking for an element by ID should give only one result when valid, as element IDs are supposed to be unique. It is less obvious whether checking for an element by name requires length to be 1 or just greater than zero. However, the way that the previous and target objects are focused automatically (lines 219 and 251, respectively) suggests that a test for length 1 is the correct approach, since otherwise the last element in the jQuery object array would get focus instead of any others. Although this may be the desired effect in some cases, it is imprecise and unpredictable.
Updated code on lines 21-24 should read:

if(check_id.length == 1)
   obj = check_id;
else if(check_name.length == 1)
   obj = check_name;


This is actually more efficient in some ways because now the if-test on line 250 will fail for invalid IDs and names (since defaults.target = null), instead of trying to set focus on an inexistent element.

On a different note, I also wrote a very small addition to implement the ignoring of tabs following a field advancement by Autotab, as proposed by Matthew Dempsky in his thread of October 7, 2008. As a heavy web user I tab through many forms daily, and often auto-tab implementations will mess up my form entry (as explained by Banned in Boston in his thread of November 4, 2008). However, a customer for whom I am currently developing a proprietary system demands auto-tab in telephone entry which, for usability and historical reasons related to the customer's databases, must remain as three separate fields.

This implementation uses a half-second delay period in which it ignores the tab key, only after Autotab automatically advances to a target. The normal "tab-tab-tab" progression is never affected. In my tests, I found one half-second to be a good duration, although it can obviously be altered quite easily.
The function to cancel a tab call is short and sweet, and I inserted it on line 28 of 1.1b, immediately following the check_element function definition. Note that I use the event.keyCode call because of its clarity (and as used in jQuery standards, see <http://docs.jquery.com/Events/keyup#examples>), but the use of 'keyCode' vs. 'which' comes down to developer preference.

// Stop action of tab key
function stop_tab(e) {
   if(e.keyCode == 9) {
      return false;
   }
};


The magic happens with a call to bind the stop_tab function on keydown to the target field after an "autotab", and a timeout to unbind the function after 500ms. The following code replaces lines 250-251:

if($.inArray(e.which, keys) == -1 && val.length == defaults.maxlength && defaults.target) {
   defaults.target.focus().bind('keydown',stop_tab);
   setTimeout(function() { defaults.target.unbind('keydown',stop_tab); }, 500);
}


Lastly, it would be great to include a packed version of Autotab for production environments along with the source. This saves developers using Autotab the hassle of packing the source for their clients each time they download Autotab. In fact, having one packed version available on the site as a production release, and then a separate optional download of the unpacked source, would save you bandwidth costs as well.
The optimal packing tool right now seems to be Yahoo!'s YUI Compressor <http://developer.yahoo.com/yui/compressor/>, as supported by size calculations and in tests with Autotab. Packing Autotab 1.0, I got an output file 39% the size of the original. Packing my (modified) version of 1.1b, I got an output 34% the size of the original! Compare this to the conservative (non-regressive) setting of JSMin, which downsizes to only 43% of the original size of 1.1b. Coincidentally, YUI Compressor is also recommended by the jQuery folks (see <http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_compress_my_code.3F>).

Thanks for all your great work, and I look forward to the next release!

Hi, I came across this article when looking to implement this solution for a web application I am developing specific to the iPhone. I have implemented autotab and it is running fine in all my desktop web browsers.

However, due to the iPhone's keyboard which hides when a field loses focus the auto tab doesn't move to the next field. Would it be possible to implement a check to determine in the user is using an iPhone and make this work on this platform?