注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery自动跳格插件Autotab

输入 fishcity 964浏览

jQuery自动跳格插件Autotab

Autotab是一个增加输入速度和体验性的jQuery插件,autotab可以自动跳格或是过滤(跳过)表单中的文本框,从而可以方便的快速输入。autotar的原理是设定文本框的最大字符数,当输入的字符长度达到时焦点会自动跳格到下一个文本框,同理,当按退格键清理文本框的内容后再按一下的话焦点会跑格到上一个文本框。

为什么要用jQuery Autotab?

自动跳格的行为逻辑,在这两个跳格前进和向后跳格。

让你的用户能够轻松快速地修改文本框内容

过滤文本字框来减少数据的修改,保证提交表单的正确性。

实现快速粘贴功能。

当一个特定的字符被按下时通过自动Tab键增强文本字段。

它体积小,速度快,易于装载和基于强大的jQuery库。

要求

Autotab可在jQuery 1.7 +和2.x工作,但您的网站支持Internet Explorer 6,7和/或8,请使用jQuery 1.7 +,因为2.x的不对这些浏览器支持。

使用方法

引入核心库文件jquery.autotab.js和jquery

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.autotab.js"></script>

安装和使用

在jQuery的$(document).ready()加载事件中, Autotab可以使用几种不同的方式进行安装,自动跳格和过滤这两个组件构成了Autotab,它们可以相互独立管理,但都可以实现相同的结果,这取决于你对表单设置的复杂程度。

自动Tab键

注意:如果选择匹配多个元素,那么目标元素和之前设置过的元素都会被重写,以当前的规则为准。

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

.autotab(string)字符串:可以是一个过滤器格式或数值,它告诉脚本删除或恢复自动跳格和过滤功能。 注:上一个自动Tab键规则将被覆盖。只更换过滤器,只需调用autotab('filter', '')

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

示例

输入一个字符长度就自动跳格

$('.answer').autotab({ maxlength: 1 });
<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键顺序和号码过滤。

$('.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>

转载请注明:jQ酷 » jQuery自动跳格插件Autotab

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。