DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

JQuery AutoTab Plugin - For Better User Experience

  • submit to reddit

	<title>jQuery AutoTab Plugin</title>

	<script type="text/javascript" src="jQuery%20AutoTab%20Plugin_files/jquery_002.js"></script>
	<script type="text/javascript" src="jQuery%20AutoTab%20Plugin_files/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		// Number example
		$('#area_code').autotab({ target: $('#number1'), format: 'numeric' });
		$('#number1').autotab({ target: $('#number2'), format: 'numeric', previous: $('#area_code') });
		$('#number2').autotab({ previous: $('#number1'), format: 'numeric' });

		// All example
		$('#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') });

<h2>jQuery AutoTab Plugin</h2>

<p>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). 

<h3>Numbers only</h3>

		<td colspan="5"><strong>Phone Number:</strong></td>
		<td><input name="area_code" id="area_code" maxlength="3" size="3" value="" type="text"></td>
		<td><input name="number1" id="number1" maxlength="3" size="3" value="" type="text"></td>
		<td><input name="number2" id="number2" maxlength="4" size="5" value="" type="text"></td>