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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 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获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php上传文件问题汇总
2015/01/30 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
React组件生命周期详解
2017/07/03 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python executemany的使用及注意事项
2017/03/13 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
古驰英国官网:GUCCI英国
2020/03/07 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
中考冲刺决心书
2014/03/11 职场文书
爱心捐助倡议书
2014/05/19 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
倡议书的格式写法
2015/04/28 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL