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 Manager

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

JQuery AutoTab Plugin - For Better User Experience

10.09.2008

| 3468 views |


<html>
<head>
	<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') });
	});
	//-->
	</script>
</head>

<body>
<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>

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

</tbody></table>

<hr>
</body>
</html>

Tags: