我们讲解下Autotab插件的使用，在输入授权码或者多少位数的密钥的时候用的比较多，下面的demo是每个输入三个文字就自动跳到下一个文本框，可以提高用户体验。
今天介绍jQuery Autotab插件的用法，我们可以通过<input type="text" name="num1" id="num1" maxlength="3" size="3" />设置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Autotab</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.autotab-1.1b.js"></script>
<script type="text/javascript">
$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic();
})
</script>
<style type="text/css"></style>
</head>
<body>
<h1>Autotab自动Tab文本框</h1>
<p id="info">
<form action="" method="post" id="autotab">
<label>请输入验证码：
<input type="text" name="num1" id="num1" maxlength="3" size="3" />
-
<input type="text" name="num2" id="num2" maxlength="3" size="3" />
-
<input type="text" name="num3" id="num3" maxlength="4" size="4" />
-
<input type="text" name="num4" id="num4" maxlength="3" size="3" />
-
<input type="text" name="num5" id="num5" maxlength="3" size="3" />
-
<input type="text" name="num6" id="num6" maxlength="4" size="4" />
</label>
</form>
</p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Autotab</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.autotab-1.1b.js"></script>
<script type="text/javascript">
$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
</script>
<style type="text/css"></style>
</head>
<body>
<h1>Autotab自动Tab文本框</h1>
<p id="info">
<form action="" method="post" id="autotab">
<label>请输入验证码：
<input type="text" name="num1" id="num1" maxlength="3" size="3" />
-
<input type="text" name="num2" id="num2" maxlength="3" size="3" />
-
<input type="text" name="num3" id="num3" maxlength="4" size="4" />
-
<input type="text" name="num4" id="num4" maxlength="3" size="3" />
-
<input type="text" name="num5" id="num5" maxlength="3" size="3" />
-
<input type="text" name="num6" id="num6" maxlength="4" size="4" />
</label>
</form>
</p>
</body>
</html>
