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截取指定长度字符串代码
Aug 21 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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 实现explort() 功能的详解
2013/06/20 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP面向对象精要总结
2014/11/07 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python3开发环境搭建详细教程
2020/06/18 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
自荐信怎么写好
2013/11/11 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
教师产假请假条
2014/04/10 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
先进党支部申报材料
2014/12/24 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android