效果图及代码如下：<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><script src="jquery.autotab.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { $('#example_form').submit(function() { return false; });
// Number example $('#area_code').autotab({ target: 'number1', format: 'numeric' }); $('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' }); $('#number2').autotab({ target: 'ssn1', previous: 'number1', format: 'numeric' });
$('#ssn1').autotab({ target: 'ssn2', format: 'numeric', previous: 'number2' }); $('#ssn2').autotab({ target: 'ssn3', format: 'numeric', previous: 'ssn1' }); $('#ssn3').autotab({ target: 'text1', format: 'numeric', previous: 'ssn2' });
// Text example $('#text1').autotab({ target: 'text2', format: 'text', previous: 'ssn3' }); $('#text2').autotab({ target: 'text3', format: 'text', previous: 'text1' }); $('#text3').autotab({ target: 'alpha1', format: 'text', previous: 'text2' });
// Alpha example $('#alpha1').autotab({ target: 'alpha2', format: 'alpha', previous: 'text3' }); $('#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({ target: 'alphanumeric1', previous: 'alpha4', format: 'alpha' });
// Alphanumeric example $('#alphanumeric1').autotab({ target: 'alphanumeric2', format: 'alphanumeric', uppercase: true, previous: 'alpha5' }); $('#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({ target: 'all1', previous: 'alphanumeric4', format: 'alphanumeric', uppercase: true });
// All example $('#all1').autotab({ target: 'all2', previous: 'alphanumeric5' }); $('#all2').autotab({ target: 'all3', previous: 'all1' }); $('#all3').autotab({ target: 'all4', previous: 'all2' }); $('#all4').autotab({ target: 'all5', previous: 'all3' }); $('#all5').autotab({ previous: 'all4' });});</script>
<h3>jQuery plugin --- Autotab--自动切换文本框。</h3><form action="" method="post" id="example_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" />
<div><strong>Social Security Number:</strong></div><input type="text" name="ssn1" id="ssn1" maxlength="3" size="3" /> -<input type="text" name="ssn2" id="ssn2" maxlength="2" size="3" /> -<input type="text" name="ssn3" id="ssn3" maxlength="4" size="5" />
<div><strong>Text characters only:</strong></div><input type="text" name="text1" id="text1" maxlength="5" size="4" /> -<input type="text" name="text2" id="text2" maxlength="4" size="4" /> -<input type="text" name="text3" id="text3" maxlength="5" size="4" />
<div><strong>Alpha only:</strong></div><input type="text" name="alpha1" id="alpha1" maxlength="5" size="4" /> -<input type="text" name="alpha2" id="alpha2" maxlength="5" size="4" /> -<input type="text" name="alpha3" id="alpha3" maxlength="5" size="4" /> -<input type="text" name="alpha4" id="alpha4" maxlength="5" size="4" /> -<input type="text" name="alpha5" id="alpha5" maxlength="5" size="4" />
<div><strong>Uppercase letters and numbers (Converts lowercase letters to uppercase):</strong></div><input type="text" name="alphanumeric1" id="alphanumeric1" maxlength="5" size="4" /> -<input type="text" name="alphanumeric2" id="alphanumeric2" maxlength="5" size="4" /> -<input type="text" name="alphanumeric3" id="alphanumeric3" maxlength="5" size="4" /> -<input type="text" name="alphanumeric4" id="alphanumeric4" maxlength="5" size="4" /> -<input type="text" name="alphanumeric5" id="alphanumeric5" maxlength="5" size="4" />
<div><strong>Any and all characters:</strong></div><input type="text" name="all1" id="all1" maxlength="5" size="4" /> -<input type="text" name="all2" id="all2" maxlength="5" size="4" /> -<input type="text" name="all3" id="all3" maxlength="5" size="4" /> -<input type="text" name="all4" id="all4" maxlength="5" size="4" /> -<input type="text" name="all5" id="all5" maxlength="5" size="4" /></form>
jquery.autotab.js：/* * Autotab - jQuery plugin 1.0 * http://dev.lousyllama.com/auto-tab * * Copyright (c) 2008 Matthew Miller * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Revised: 2008/05/22 01:23:25 */
(function($) {
$.fn.autotab = function(options) { var defaults = { format: 'all', // text, numeric, alphanumeric, all maxlength: 2147483647, // Defaults to maxlength value uppercase: false, // Converts a string to UPPERCASE lowercase: false, // Converts a string to lowecase nospace: false, // Remove spaces in the user input target: null, // Where to auto tab to previous: null // Backwards auto tab when all data is backspaced };
$.extend(defaults, options);
var check_element = function(name) { var val = null; var check_id = $('#' + name)[0]; var check_name = $('input[name=' + name + ']')[0];
if(check_id != undefined) val = $(check_id); else if(check_name != undefined) val = $(check_name);
return val; };
var key = function(e) { if(!e) e = window.event;
return e.keyCode; };
// Sets targets to element based on the name or ID passed if(typeof defaults.target == 'string') defaults.target = check_element(defaults.target);
if(typeof defaults.previous == 'string') defaults.previous = check_element(defaults.previous);
var maxlength = $(this).attr('maxlength');
// Each text field has a maximum character limit of 2147483647
// defaults.maxlength has not changed and maxlength was specified if(defaults.maxlength == 2147483647 && maxlength != 2147483647) defaults.maxlength = maxlength; // defaults.maxlength overrides maxlength else if(defaults.maxlength > 0) $(this).attr('maxlength', defaults.maxlength) // defaults.maxlength and maxlength have not been specified // A target cannot be used since there is no defined maxlength else defaults.target = null;
// IE does not recognize the backspace key // with keypress in a blank input box if($.browser.msie) { this.keydown(function(e) { if(key(e) == 8) { var val = this.value;
if(val.length == 0 && defaults.previous) defaults.previous.focus(); } }); }
return this.keypress(function(e) { if(key(e) == 8) { var val = this.value;
if(val.length == 0 && defaults.previous) defaults.previous.focus(); } }).keyup(function(e) { var val = this.value;
switch(defaults.format) { case 'text': var pattern = new RegExp('[0-9]+', 'g'); var val = val.replace(pattern, ''); break;
case 'alpha': var pattern = new RegExp('[^a-zA-Z]+', 'g'); var val = val.replace(pattern, ''); break;
case 'number': case 'numeric': var pattern = new RegExp('[^0-9]+', 'g'); var val = val.replace(pattern, ''); break;
case 'alphanumeric': var pattern = new RegExp('[^0-9a-zA-Z]+', 'g'); var val = val.replace(pattern, ''); break;
case 'all': default: break; }
if(defaults.nospace) { pattern = new RegExp('[ ]+', 'g'); val = val.replace(pattern, ''); }
if(defaults.uppercase) val = val.toUpperCase();
if(defaults.lowercase) val = val.toLowerCase();
this.value = val;
/** * Do not auto tab when the following keys are pressed * 8: Backspace * 9: Tab * 16: Shift * 17: Ctrl * 18: Alt * 19: Pause Break * 20: Caps Lock * 27: Esc * 33: Page Up * 34: Page Down * 35: End * 36: Home * 37: Left Arrow * 38: Up Arrow * 39: Right Arrow * 40: Down Arroww * 45: Insert * 46: Delete * 144: Num Lock * 145: Scroll Lock */ var keys = [8, 9, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145]; var string = keys.toString();
if(string.indexOf(key(e)) == -1 && val.length == defaults.maxlength && defaults.target) defaults.target.focus(); });};
})(jQuery);
