jquery autotab插件

jQuery Autotab ============== Autotab is a jQuery plugin that provides auto tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a text field, the focus is automatically set to a defined element. Likewise, clearing out the text field's content by pressing backspace eventually places the focus on a previous element. ## Why jQuery Autotab? * Auto tabbing behaves logically, in both tabbing forward and tabbing backwards. * Allow your users to easily modify your text in a tab that would otherwise auto tab away. * Reduce the amount of bad data submitted in a form by filtering text fields. * Populate multiple text fields by pasting into one. * Enhance text fields by auto tabbing when a specific character is pressed. * It is small, fast, easy to load and built on the powerful jQuery library. ## Table of Contents * [Requirements](#requirements) * [Installation](#installation) * [Setup and Usage](#setup-and-usage) * [Auto Tabbing](#auto-tabbing) * [Examples](#examples) * [Remove and Restore](#remove-and-restore) * [Examples](#examples-1) * [Filtering](#filtering) * [Examples](#examples-2) * [Forced Auto Tabbing](#forced-auto-tabbing) * [Options](#options) * [Filter Formats](#filter-formats) * [Minify](#minify) * [Feedback](#feedback) * [Copyright and License](#copyright-and-license) ## Requirements Autotab works in both jQuery 1.7+ and 2.x. If your site supports Internet Explorer 6, 7, and/or 8, use jQuery 1.7+ since 2.x drops support for these browsers. ## Installation Add a reference to jquery.autotab.js. ```html <script src="jquery.autotab.js"></script> ``` ## Setup and Usage Autotab can be setup in several different ways within jQuery's `$(document).ready()` event. The two components that make up Autotab, auto tabbing and filtering, can be managed independently from one another, providing numerous ways of achieving the same result, depending on how indepth you want to setup your form. ### Auto Tabbing __Note:__ If the selector matches multiple elements, the target and previous fields will be overwritten if previously set. <table width="100%"> <tr> <td width="25%">.autotab()</td> <td>Accepts no arguments and applies auto tabbing rules only.</td> </tr> <tr> <td valign="top">.autotab(string)</td> <td> <strong>string</strong>: Can be a filter format or a value that tells the script to remove or restore auto tab and filtering functionality. <br /> <strong>Note</strong>: Previous auto tabbing order will be overwritten. To change the filter only, call <code>.autotab('filter', '')</code> </td> </tr> <tr> <td>.autotab(object)</td> <td><strong>object</strong>: Applies the specified options to all matched elements.</td> </tr> </table> #### Examples Establishes auto tabbing rules only and forces each field to have a `maxlength` of 1. ```js $('.answer').autotab({ maxlength: 1 }); ``` ```html <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> ``` Automatically establishes auto tabbing order and number filtering. ```js $('.number').autotab('number'); ``` ```html <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> ``` Manually defines auto tabbing order and alphanumeric filtering. ```js $('#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' }); ``` ```html <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> ``` ### Remove and Restore <table width="100%"> <tr> <td width="35%" valign="top"> .autotab('remove|destroy|disable') </td> <td> <strong>string</strong>: Disables auto tab and filtering functionality on all matched elements. <br /> <strong>Note</strong>: Both <code>destroy</code> and <code>remove</code> will disable auto tab and filtering. Standard and custom event bindings persist as they check the status of an element when called. Removing the <code>keydown</code> and <code>keypress</code> can have a negative impact in both user and developer experience if the same events have been bound in other areas. </td> </tr> <tr> <td valign="top">.autotab('restore|enable')</td> <td> <strong>string</strong>: Restores auto tab and filtering functionality on all matched elements. </td> </tr> </table> #### Examples Manually turn off auto tab and filtering functionality on all text boxes. ```js $('#remove-autotab').on('click', function () { $('input[type=text]').autotab('remove'); }); ``` ```html <button id="remove-autotab">Turn Off</button> ``` Manually turn on auto tab and filtering functionality on all text boxes. ```js $('#restore-autotab').on('click', function () { $('input[type=text]').autotab('restore'); }); ``` ```html <button id="restore-autotab">Turn On</button> ``` ### Filtering __Note:__ If passing an object, the target and previous fields are ignored, if included, to preserve previously established auto tab rules. Use `.autotab(object)` to modify the target and previous fields. <table width="100%"> <tr> <td width="25%">.autotab('filter', string)</td> <td><strong>string</strong>: Applies the specified filter format to all matched elements.</td> </tr> <tr> <td valign="top">.autotab('filter', object)</td> <td> <strong>object</strong>: Applies the specified filter options to all matched elements. The target and previous fields are ignored. </td> </tr> </table> Because of how Autotab's settings are stored, it is possible to define the filter format using `data-autotab-format`. If using `custom`, place your regular expression in `data-autotab-pattern`. #### Examples Manually defines text filtering. ```js $('#salt').autotab('filter', 'text'); ``` ```html <div> <label>Salt</label> <input type="text" id="salt" maxlength="16" size="12" /> </div> ``` Manually defines alphanumeric filtering and converts all alpha characters to uppercase format. ```js $('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true }); ``` ```html <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> ``` Manually defines number filtering via `data-autotab-format`. In this example, `$(selector).autotab()` will take the attribut