Autotab是一个jQuery插件，它提供自动跳格和过滤的表单中的文本字段。最大字符数已在文本字段内达成，焦点会自动设置为一个定义的元素。同样，清理出文本字段的内容按退格键最终会将焦点上一个元素上。
为什么jQuery的Autotab？
自动跳格的行为逻辑，在这两个跳格前进和向后跳格。
让你的用户能够轻松地修改您的文字标签，否则将自动标签了。
减少通过过滤文本字段提交表单坏的数据量。
通过粘贴到一个填充多个文本字段。
当一个特定的字符被按下时通过自动Tab键增强文本字段。
它体积小，速度快，易于装载和建立在强大的jQuery库。
要求
Autotab在这两个工程的jQuery 1.7 +和2.x 如果您的网站支持Internet Explorer 6，7和/或8，使用jQuery 1.7 +因为2.x的不对这些浏览器支持。
安装
添加引用jquery.autotab.js。
1 | <script src="jquery.autotab.js"></script> |
安装和使用
Autotab可以设定在范围内jQuery的几种不同的方式$(document).ready()的事件。这两个组件构成Autotab，自动跳格和过滤，可以相互独立管理，提供实现相同的结果了很多方法，这取决于你如何深入想设置表单。
自动Tab键
注意：如果选择匹配多个元素，目标和以前的领域，如果以前设置将被覆盖。
.autotab()不接受任何参数，并仅适用于自动跳格的规则。
.autotab(string)字符串：可以是一个过滤器格式或数值，它告诉脚本删除或恢复自动标签和过滤功能。 注：上自动Tab键顺序将被覆盖。更换过滤器而已，调用。.autotab('filter', '')
.autotab(object)对象：适用于指定的选项对所有匹配的元素。
示例
只有建立和跨栏规则每个字段有一个最大长度的1。
1 | $('.answer').autotab({ maxlength: 1 }); |
1 2 3 4 5 6 7 8 | <div> <label>Answer 1</label> <input type="text" id="answer1" class="answer" size="3" /> - <label>Answer 2</label> <input type="text" id="answer2" class="answer" size="3" /> - <label>Answer 3</label> <input type="text" id="answer3" class="answer" size="3" /> -</div> |
自动建立自动Tab键顺序和号码过滤。
1 | $('.number').autotab('number'); |
1 2 3 4 5 6 | <div> <label>Phone Number</label> <input type="text" id="number1" class="number" maxlength="3" size="3" /> - <input type="text" id="number2" class="number" maxlength="3" size="3" /> - <input type="text" id="number3" class="number" maxlength="4" size="5" /></div> |
手动自定义Tab顺序和字母数字滤波。
1 2 3 4 5 | $('#alphanumeric1').autotab({ format: 'alphanumeric', target: '#alphanumeric2' });$('#alphanumeric2').autotab({ format: 'alphanumeric', target: '#alphanumeric3', previous: '#alphanumeric1' });$('#alphanumeric3').autotab({ format: 'alphanumeric', target: '#alphanumeric4', previous: '#alphanumeric2' });$('#alphanumeric4').autotab({ format: 'alphanumeric', target: '#alphanumeric5', previous: '#alphanumeric3' });$('#alphanumeric5').autotab({ format: 'alphanumeric', previous: '#alphanumeric4' }); |
1 2 3 4 5 6 7 8 | <div> <label>Product Key</label> <input type="text" id="alphanumeric1" class="alphanumeric" maxlength="5" size="4" /> - <input type="text" id="alphanumeric2" class="alphanumeric" maxlength="5" size="4" /> - <input type="text" id="alphanumeric3" class="alphanumeric" maxlength="5" size="4" /> - <input type="text" id="alphanumeric4" class="alphanumeric" maxlength="5" size="4" /> - <input type="text" id="alphanumeric5" class="alphanumeric" maxlength="5" size="4" /></div> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jquery拖拽插件Shapeshift v2.0
- 下一个特效： jQuery清除插件Add-Clear