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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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/03/16 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
react路由配置方式详解
2017/08/07 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
python中正则的使用指南
2016/12/04 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Python中 map()函数的用法详解
2018/07/10 Python
python3实现逐字输出的方法
2019/01/23 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
python装饰器代码深入讲解
2021/03/01 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
数组越界问题
2015/10/21 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
营销总经理岗位职责
2014/02/02 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
竞赛口号大全
2014/06/16 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
检讨书模板
2015/01/29 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
销售督导岗位职责
2015/04/10 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android