jquery表单插件Autotab使用方法详解


Posted in Javascript onJune 24, 2016

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

就是只能输入数字了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 #Javascript
jQuery下拉框的简单应用
Jun 24 #Javascript
浅谈json取值(对象和数组)
Jun 24 #Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 #Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 #Javascript
JS控制文本域只读或可写属性的方法
Jun 24 #Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 #Javascript
You might like
用PHP实现维护文件代码
2007/06/14 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
理解JS事件循环
2016/01/07 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
python和ruby,我选谁?
2017/09/13 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
生产现场工艺工程师岗位职责
2013/11/28 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
实习公司领导推荐函
2014/05/21 职场文书
应届毕业生自荐信
2014/05/28 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript