Skip to content

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

jQuery Autotab Plugin v1.1b (1872692)

Demo

Phone Number:

- -

Social Security Number:

- -

Text characters only:

- -

Alpha only:

- - - -

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

- - - -

Any and all characters:

- - - -

Regular Expression (Allows numbers and periods):

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.
Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit
115 Comments
  1. Gaston permalink

    Thank you! Great Plugin!

  2. Payton Jass permalink

    I’m trying to setup validation on a field that is ‘alpha’, but doesn’t remove the spaces of text once it blocks out numeric values. For instance, “Dave Smith2″ will change to “DaveSmith” when a number is added. I tried setting nospace:’false’ and that didn’t work. Thanks! Great plugin btw!

  3. Lewis permalink

    I really like this functionality… however, in my case, to be able to use it, I would need to know if it’s possible to set a timer in which the auto tab is performed… example:

    In a scoring table form…
    I want to set the custom values to: 1,2,3,4,5,6,7,8,9,10…

    The problem is that in the form those characters should be an option for every field… however the max length should then be TWO (2) characters, but then if someone ONLY WANTS A SINGLE CHARACTER VALUE in the field… it won’t autotab, cause there is still one character missing to reach the pre-set max length.

    Any ideas?

    Thanks in advance,

    Lewis.

  4. Hi Mat,
    I wish I could filter an input text for decimal value. Which code I should use ?

  5. derek permalink

    Hi there,

    Just a question about this auto tab script. I am using it with a phone number, but I have the area code pre-populated, and the cursor starts in the second box. But if a person wants to change the area code, they should be able to just backspace, and delete the area code to put in a different one. However, when you backspace to a field that is pre-populated, the cursor goes to the beginning of the area code field.

    If you type the area code, and it auto tabs to the next box and you continue typing, then backspace all the way, it works great. It’s just a problem with the area code field has a value to start.

    Any ideas?
    Thank you

  6. derek permalink

    just to add… it does work in Safari, but not in Firefox. (backspacing through pre-populated area code field)

    thanks

    • Matthew permalink

      I’ll be sure to give that a look when I do the rewrite, whenever that will be (hopefully in the next few months, but don’t hold your breath).

  7. derek permalink

    Also, any ideas on how to make auttoab work on iPad? (safari mobile)

    • Matthew permalink

      Sorry, not at this time. I have an iPhone I can try to test it out with, but I currently lack the time.

  8. Hey – I love the plug in but can’t get it to work with ASP.NET master pages because of the naming conventions.

    The fields are:

    ()

    And this code causes a jquery error:

    $(‘#CPH1_Student1PhoneNumber1′).autotab({ target: ‘ctl00$CPH1$Student1PhoneNumber2′, format: ‘numeric’ });

    Is there a way to target a field by ID instead of name?

  9. zxprince permalink

    Thank you so much…. really a great plugin … thank you again

  10. Richy Hicky permalink

    Thanks very much for this it’s great

Trackbacks & Pingbacks

  1. jQuery AutoTab Plugin « Jquery Labs
  2. Code snippet » 8 ciekawych i przydatnych pluginów do jQuery
  3. Ultimate List of jQuery Plugins You Should Use on Every Website | Web Designer Aid
  4. Ultimate List of jQuery Plugins You Should Use on Every Website « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
  5. JavaScript and jQuery: The workflow | Web
  6. 方山子的博客 » 24个实用的 jQuery 插件
  7. 分享24款非常有用的 jQuery 插件 « minvision
  8. [转] jQuery插件分享 | 1个饼
  9. Share of 24 very useful jQuery plugin
  10. 80+ AJAX Resources, Downloads, and Tutorials | Redesigner.org
  11. Autotab: jQuery auto-tabbing and filter plugin For TextBox
  12. 分享24款非常有用的jQuery插件 | 想来网
  13. JQUERY « prubman
  14. 15 Simple & Effective jQuery Plugins that Enhance Your Forms | Bitmag

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS