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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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
海贼王:最美的悬赏令!
2020/03/02 日漫
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
Javascript开发包大全整理
2006/12/22 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
python开根号实例讲解
2020/08/30 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
应届生自荐信范文
2014/02/21 职场文书
会议室管理制度范本
2015/08/06 职场文书
2016年小学生新年寄语
2015/08/18 职场文书