返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

插件Autotab自动Tab文本框

2020-05-07 文章标签: Autotab 浏览次数:

我们讲解下Autotab插件的使用,在输入授权码或者多少位数的密钥的时候用的比较多,下面的demo是每个输入三个文字就自动跳到下一个文本框,可以提高用户体验。

HTML5教程

今天介绍jQuery Autotab插件的用法,我们可以通过<input type="text" name="num1" id="num1" maxlength="3" size="3" />设置

jQuery Autotab插件的用法

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


你可能还感兴趣···

建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。