jQuery AutoTab Plugin

Sometimes a project's specs calls for consistent data formatting and a find/replace via a regular expression doesn't always work for you. Information like a phone number, serial number, product key, social security number, etc. are entered in individual text boxes and are formatted to your liking (or the specs liking). One desired feature on each of these individual text boxes is to automatically focus on a box when one is filled. While we're at it, why not add a backspace functionality too? You know, when there's nothing in the box, and you hit backspace, it goes to the previous text box. We'll also throw in a filter, so that the text box contains only text, alpha, numeric, alphanumeric, or all characters. Yes, it can do that and more! Uppercase or lowercase text? Sure! Go ahead, try it out for yourself!

One side note: I'm currently working on a way to reduce the amount of information being passed to the plugin. I had one implementation working, but it didn't have room for specifying what element to focus on when the limit was reached. So, for now this is the crude method. Enjoy until I slim the usage down.

Numbers only

Phone Number:
	-	-
Social Security Number:
	-	-

$(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' });
	$('#ssn1').autotab({ target: $('#ssn2'), format: 'numeric' });
	$('#ssn2').autotab({ target: $('#ssn3'), format: 'numeric', previous: $('#ssn1') });
	$('#ssn3').autotab({ previous: $('#ssn2'), format: 'numeric' });
});

Text characters only

$(document).ready(function() {
	$('#text1').autotab({ target: $('#text2'), format: 'text' });
	$('#text2').autotab({ target: $('#text3'), format: 'text', previous: $('#text1') });
	$('#text3').autotab({ format: 'text', previous: $('#text2') });
});

Alpha only

$(document).ready(function() {
	$('#alpha1').autotab({ target: $('#alpha2'), format: 'alpha' });
	$('#alpha2').autotab({ target: $('#alpha3'), format: 'alpha', previous: $('#alpha1') });
	$('#alpha3').autotab({ target: $('#alpha4'), format: 'alpha', previous: $('#alpha2') });
	$('#alpha4').autotab({ target: $('#alpha5'), format: 'alpha', previous: $('#alpha3') });
	$('#alpha5').autotab({ previous: $('#alpha4'), format: 'alpha' });
});

Uppercase letters and numbers (Converts lowercase letters to uppercase)

$(document).ready(function() {
	$('#alphanumeric1').autotab({ target: $('#alphanumeric2'), format: 'alphanumeric', uppercase: true });
	$('#alphanumeric2').autotab({ target: $('#alphanumeric3'), format: 'alphanumeric', uppercase: true, previous: $('#alphanumeric1') });
	$('#alphanumeric3').autotab({ target: $('#alphanumeric4'), format: 'alphanumeric', uppercase: true, previous: $('#alphanumeric2') });
	$('#alphanumeric4').autotab({ target: $('#alphanumeric5'), format: 'alphanumeric', uppercase: true, previous: $('#alphanumeric3') });
	$('#alphanumeric5').autotab({ previous: $('#alphanumeric4'), format: 'alphanumeric', uppercase: true });
});

Any and all characters.

$(document).ready(function() {
	$('#all1').autotab({ target: $('#all2') });
	$('#all2').autotab({ target: $('#all3'), previous: $('#all1') });
	$('#all3').autotab({ target: $('#all4'), previous: $('#all2') });
	$('#all4').autotab({ target: $('#all5'), previous: $('#all3') });
	$('#all5').autotab({ previous: $('#all4') });
});

<< Go Back