Jquery特效七:自动切换文本框

效果图及代码如下：


<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);