jQuery自动跳格插件Autotab

jQuery自动跳格插件Autotab
 点击预览  点击下载

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. <div> 
  2.     <label>Answer 1</label> 
  3.     <input type="text" id="answer1" class="answer" size="3" /> - 
  4.     <label>Answer 2</label> 
  5.     <input type="text" id="answer2" class="answer" size="3" /> - 
  6.     <label>Answer 3</label> 
  7.     <input type="text" id="answer3" class="answer" size="3" /> - 
  8. </div> 

手动自定义Tab顺序和字母数字滤波。

  1. $('#alphanumeric1').autotab({ format: 'alphanumeric' target: '#alphanumeric2' }); 
  2. $('#alphanumeric2').autotab({ format: 'alphanumeric' target: '#alphanumeric3' previous: '#alphanumeric1' }); 
  3. $('#alphanumeric3').autotab({ format: 'alphanumeric' target: '#alphanumeric4' previous: '#alphanumeric2' }); 
  4. $('#alphanumeric4').autotab({ format: 'alphanumeric' target: '#alphanumeric5' previous: '#alphanumeric3' }); 
  5. $('#alphanumeric5').autotab({ format: 'alphanumeric' previous: '#alphanumeric4' }); 
  1. <div> 
  2.     <label>Product Key</label> 
  3.     <input type="text" id="alphanumeric1" class="alphanumeric" maxlength="5" size="4" /> - 
  4.     <input type="text" id="alphanumeric2" class="alphanumeric" maxlength="5" size="4" /> - 
  5.     <input type="text" id="alphanumeric3" class="alphanumeric" maxlength="5" size="4" /> - 
  6.     <input type="text" id="alphanumeric4" class="alphanumeric" maxlength="5" size="4" /> - 
  7.     <input type="text" id="alphanumeric5" class="alphanumeric" maxlength="5" size="4" /> 
  8. </div> 

转载请注明:代码家园 » jQuery自动跳格插件Autotab

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)