jQuery自动跳格插件Autotab

 查看演示  website  立即下载

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。

<script src="jquery.autotab.js"></script>

安装和使用

Autotab可以设定在范围内jQuery的几种不同的方式$(document).ready()的事件。这两个组件构成Autotab，自动跳格和过滤，可以相互独立管理，提供实现相同的结果了很多方法，这取决于你如何深入想设置表单。

自动Tab键

注意：如果选择匹配多个元素，目标和以前的领域，如果以前设置将被覆盖。

.autotab()不接受任何参数，并仅适用于自动跳格的规则。

.autotab(string)字符串：可以是一个过滤器格式或数值，它告诉脚本删除或恢复自动标签和过滤功能。 注：上自动Tab键顺序将被覆盖。更换过滤器而已，调用。.autotab('filter', '')

.autotab(object)对象：适用于指定的选项对所有匹配的元素。

示例

只有建立和跨栏规则每个字段有一个最大长度的1。

$('.answer').autotab({ maxlength: 1 });

<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键顺序和号码过滤。

$('.number').autotab('number');

<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顺序和字母数字滤波。

$('#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' });

<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>

PREVIOUS:
NEXT:
jQuery清除插件Add-Clear
jquery拖拽插件Shapeshift v2.0