Autotab: jQuery auto-tabbing and filter plugin

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. NOTE: I still have all of the feedback I have received when my site was running Drupal. When this script moves past 1.1b, I will do my best to incorporate many of the suggestions given.

Why jQuery Autotab and not some other auto-tab script?

• 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, ie. restrict a phone number fields to just numbers.
• It’s small, fast, easy to load and built on the powerful jQuery library.

Download

Demo

Basic Usage

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.

1. Include jquery.autotab.js in your HTML:

   <script type="text/javascript" src="jquery.autotab.js"></script>

2. Add your 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, #number1, #number2').autotab_magic().autotab_filter('numeric');
   		});
   		</script>
   		

Advanced Usage

.autotab_magic()

Automatically assign tabbing rules to all selected elements.

Example

		<script type="text/javascript">
		$(document).ready(function() {
			$(':input').autotab_magic();
			// OR
			$('#area_code, #number1, #number2').autotab_magic();
		});
		</script>
		

.autotab_filter(string)

Apply the specified filter to an element.

Example

		<script type="text/javascript">
		$(document).ready(function() {
			$('#area_code, #number1, #number2').autotab_filter('numeric');
			$('#key1, #key2, #key3, #key4, #key5').autotab_filter('alpha');
		});
		</script>
		

Options

• all (default): Any character
• text: Any character except numbers 0 through 9
• alpha: A through Z
• numeric: 0 through 9
• number: Identical to numeric
• alphanumeric: A through Z and 0 through 9
• custom: A custom regular expression to be used along with the pattern setting.

.autotab_filter(settings)

Apply the key/value pairs to configure filter options to an element.

Example

		<script type="text/javascript">
		$(document).ready(function() {
			$('#area_code, #number1, #number2').autotab_filter({
				format: 'alphanumeric',
				uppercase: true
			});
		});
		</script>
		

Settings

• format
  The filtering method of the text field. Available filtering options are listed above.
• uppercase
  Converts any text to uppercase.
• lowercase
  Converts any text to lowercase.
• nospace
  Removes any spaces.
• pattern
  A regular expression pattern to use for custom formats.

.autotab(settings)

Apply the key/value pairs to configure auto-tab and filter options to an element. Filtering settings are optional.

Example

		<script type="text/javascript">
		$(document).ready(function() {
			// This example achieves the same result as Step 3 under Basic Usage.
			$('#area_code').autotab({ target: 'number1', format: 'numeric' });
			$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });
			$('#number2').autotab({ previous: 'number1', format: 'numeric' });
		});
		</script>
		

Settings

• All listed settings under .autotab_filter()
• maxlength
  Determines the maximum number of characters allowed in a text field. Passing maxlength will override the hardcoded maxlength attribute in the HTML.
• 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.