jquery表单插件Autotab使用方法详解
更新时间：2016年06月24日 11:45:46 投稿：lijiao
这篇文章主要为大家详细介绍了jquery表单插件Autotab使用方法，Autotab自动Tab文本框，感兴趣的小伙伴们可以参考一下
Autotab也是一款功能专一的表单插件，它提供了自动跳格的功能，当用户输入的字符数一旦超过已定义的最大长度，则会根据事先设置的目标自动跳转到相应元素上，省却了
用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有很多地方可以用到这插件，对于提高用户体验还是很有帮助的。
使用时需要引入jquery.autotab.js,下载地址：点击进入下载页面
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.autotab.js" type="text/javascript"></script>
<script type="text/javascript">
//页面加载方法
$(function(){
$('#autotab').submit(function(){
return false;
})
$('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件
})
</script>
</head>
<body>
<h1>jQuery整理笔记七</h1>
<h2>Autotab自动Tab文本框</h2>
<form method="post" action="" 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="3" size="3">
<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="3" size="3">
</form>
</body>
</html>
除了可以限定输入长度外，还可以通过autotab_filter()方法限定输入的字符类型，这个方法还能过滤大写、小写、空格、字母等，具体的用到了现查吧。
如果将上面的js改成：
$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic().autotab_filter('numeric');
})
就是只能输入数字了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jquery 抽奖小程序的相关资料,这里提供了详细的思路及实现代码和实现效果图，需要的朋友可以参考下2016-10-10
今我在网上找了好久哟。。。才找到JQUERY方式的异步文件上传，赶紧记了下来。2009-06-06
JQuery的read函数与js的onload，想必大家对这两个方法都有所熟悉吧，接下来介绍一个实例用以上两种方法各自实现，感兴趣的你可不要错过了哈，希望可以帮助到你2013-03-03
用了这长时间的jQuery,一直也没怎么写过jQuery插件，今天简单实现俩个插件，巩固下基础知识。2011-04-04
这篇文章主要为大家详细介绍了jQuery内容筛选选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
table鼠标经过变色的效果想必大家都有见到过吧，其实实现很简单，在本文有个不错的示例，感兴趣的朋友可以学习下2013-09-09
修改好的jquery滚动字幕效果，需要的朋友可以参考下。2011-06-06
jQuery UI是一套非常好用的jQuery Tools库，目前已经发布的最新版本是1.8.4。在我自己的使用过程中，总有一些不爽。因为我下载的那个包里默认的主题样式是下图这样的，使用起来很难和具体的网页风格去配合。2010-09-09
这篇文章主要为大家详细介绍了jQuery实现滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本文主要对jQuery停止动画——stop()方法的使用进行详细介绍，对学习jQuery动画有很好的帮助，下面就跟小编一起来看下吧2016-12-12
最新评论