Autotab: jQuery auto-tabbing and filter plugin

http://www.lousyllama.com/sandbox/jquery-autotab

Update:

Autotab has a new beta release. Read more here. Documentation changes will be forthcoming to this page once 1.1 has been tested and approved, but until I'm happy with the performance, this page will use 1.1b but contain 1.0 documentation.

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element. Likewise, clearing out the text field's content by pressing backspace eventually places the focus on the elements previous target. The purpose of this script is to easily establish auto-tabbing between multiple text fields. It is not intended to support formatting a single text field to a specific need; an example of this is formatting a 10 digit US phone number as (800)555-1234 or a Social Security Number as (123-45-6789).

Download Autotab 1.0 | May 22, 2008 | Dual License: MIT and GPL

Why Autotab and not something else?

• Auto-tabbing behaves logically, in both tabbing forward and tabbing backwards.
• It allows you to easily change your text in a tab that would otherwise auto-tab away.
• It can filter text fields so that you can restrict a phone number to just numbers.
• It's small, fast, easy to load and built on the powerful jQuery library.

Demo

Test out the various settings of Autotab below, each noted with their specifications.

Phone Number:

- -

Social Security Number:

- -

Text characters only:

- -

Alpha only:

- - - -

Uppercase letters and numbers (Converts lowercase letters to uppercase):

- - - -

Any and all characters:

- - - -

Recommended Usage

1. Include jquery.autotab.js in your HTML:
   <script type="text/javascript" src="jquery.autotab.js"></script>
2. Add you text fields in your HTML, including an ID:
   <form>
<div><strong>Phone Number:</strong></div>
<input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
<input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
<input type="text" name="number2" id="number2" maxlength="4" size="5" />
</form>
3. Initialize Autotab on your text fields with a ready() handler:
   <script type="text/javascript">
$(document).ready(function() {
$('#area_code').autotab({ target: 'number1', format: 'numeric' });
$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });
$('#number2').autotab({ previous: 'number1', format: 'numeric' });
});
</script>

Other Usage

Autotab allows a certain level of flexibility in how you initialize the auto-tabbing mechanism. Here is a modified version of the above example that will yield the same results:

HTML:

<form>
<div><strong>Phone Number:</strong></div>
<input type="text" name="area_code" size="3" /> -
<input type="text" name="number1" size="3" /> -
<input type="text" name="number2" size="5" />
</form>

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
$('input[name=area_code]').autotab({ target: 'number1', maxlength: 3, format: 'numeric' });
$('input[name=number1]').autotab({ target: 'number2', maxlength 3, format: 'numeric', previous: 'area_code' });
$('input[name=number2]').autotab({ previous: 'number1', maxlength 4, format: 'numeric' });
});
</script>

This example provides the benefit that you have less HTML, but the drawback is that you have to modify your selector and specify the maxlength of the field. Six here, half a dozen there; it comes down to preference.

Properties

format

The filtering method of the text field. Available filtering options are: text (anything but numbers), alpha, numeric, number (same as numeric), alphanumeric, and all (default).

maxlength

Determines the maximum number of characters allowed in a text field. Passing maxlength will override the hardcoded maxlength attribute in the HTML.

uppercase

Converts any text to uppercase.

lowercase

Converts any text to lowercase.

nospace

Removes any spaces.

target

The text field to auto-tab to when the maxlength has been reached on the current text field.

previous

The text field to auto-tab to when the Backspace key has been pressed in an empty text field. You can also press and hold Backspace to continue auto-tabbing in reverse.