Merge pull request #50 from Mathachew/dev

Changes for release 1.7

Author: Mathachew

CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.7 (2014-07-26)
+
+Features:
+
+* added support for additional fields and removed hidden fields from the selected elements, including maxlength support for textarea (#14)
+* added option to auto tab on single value select lists when selecting a value
+* added global methods to setup, remove and restore Autotab
+* elements passed to Autotab now filter out hidden form fields
+
+Bug fixes:
+
+* fixes an issue with tabbing to a previous field that is disabled, resulting in the value being modified (#47)
+
+
 ## 1.6 (2014-04-30)
 
 Features:

README.md

@@ -22,7 +22,7 @@ Autotab is a jQuery plugin that provides auto tabbing and filtering on text fiel
     * [Examples](#examples-1)
   * [Filtering](#filtering)
     * [Examples](#examples-2)
-  * [Forced Auto Tabbing](#forced-auto-tabbing)
+  * [Global Methods](#global-methods)
 * [Options](#options)
 * [Filter Formats](#filter-formats)
 * [Minify](#minify)
@@ -237,7 +237,7 @@ Manually defines number filtering via `data-autotab-format`. In this example, `$
 Other random JavaScript examples
 
 ```js
-$('input[type=text]').autotab();
+$(':input').autotab();
 $('#username').autotab({ format: 'alphanumeric', target: '#password' });
 $('#password').autotab({ previous: '#username', target: '#confirm' });
 $('#product-key').autotab('filter', { format: 'alphanumeric', uppercase: true });
@@ -248,20 +248,65 @@ $('.ipv6').autotab('filter', 'hexadecimal');
 ```
 
 
-### Forced Auto Tabbing
+### Global Methods
 
-Autotab comes with two functions that can be used to force an auto tab from a field if a criteria is met.
-
-__Note__: These methods are only useful if an element setup with Autotab has focus.
+Autotab comes with several global methods, which are probably most useful in edge cases.
 
+<table width="100%">
+  <tr>
+    <td width="30%" valign="top">$.autotab()</td>
+    <td>Initializes Autotab on all elements matching the `:input` selector.</td>
+  </tr>
+  <tr>
+    <td valign="top">$.autotab(object)</td>
+    <td><strong>object</strong>: Applies the specified options to all matched elements.
+    </td>
+  </tr>
+</table>
 <table width="100%">
   <tr>
     <td width="30%" valign="top">$.autotab.next()</td>
-    <td>Triggers the `autotab-next` event, which sets the focus on the target element, if it exists.</td>
+    <td>
+      Triggers the `autotab-next` event, which sets the focus on the target element, if it exists.
+      <br />
+      <strong>Note</strong>: This method is only useful if an element setup with Autotab has focus.
+    </td>
   </tr>
   <tr>
     <td valign="top">$.autotab.previous()</td>
-    <td>Triggers the `autotab-previous` event, which sets the focus on the previous element, if it exists.</td>
+    <td>
+      Triggers the `autotab-previous` event, which sets the focus on the previous element, if it exists.
+      <br />
+      <strong>Note</strong>: This method is only useful if an element setup with Autotab has focus.
+    </td>
+  </tr>
+</table>
+<table width="100%">
+  <tr>
+    <td width="30%" valign="top">$.autotab.remove()</td>
+    <td>Removes Autotab from all matched elements.</td>
+  </tr>
+  <tr>
+    <td valign="top">$.autotab.remove(string)</td>
+    <td><strong>string</strong>: A selector identifying the matched element.</td>
+  </tr>
+  <tr>
+    <td valign="top">$.autotab.remove(object)</td>
+    <td><strong>object</strong>: Applies the removal to all matched elements.</td>
+  </tr>
+</table>
+<table width="100%">
+  <tr>
+    <td width="30%" valign="top">$.autotab.restore()</td>
+    <td>Restores Autotab to all matched elements.</td>
+  </tr>
+  <tr>
+    <td valign="top">$.autotab.restore(string)</td>
+    <td><strong>string</strong>: A selector identifying the matched element.</td>
+  </tr>
+  <tr>
+    <td valign="top">$.autotab.restore(object)</td>
+    <td><strong>object</strong>: Applies restoration to all matched elements.</td>
   </tr>
 </table>
 
@@ -278,7 +323,8 @@ var options = {
     maxlength: integer,
     target: string|element,
     previous: string|element,
-    trigger: string|array
+    trigger: string|array,
+    tabOnSelect: boolean
 };
 ```
 <table width="100%">
@@ -358,6 +404,12 @@ var options = {
     </td>
     </td>
   </tr>
+  <tr>
+    <td valign="top">tabOnSelect</td>
+    <td>
+      <strong>boolean</strong>: Adds auto tabbing to all matched single value select lists.
+    </td>
+  </tr>
 </table>
 
 
@@ -413,7 +465,7 @@ Autotab has several filter formats available, all passed into the `format` key.
 
 ## Minify
 
-Autotab uses the [samqode minifier](http://samqode.com/minifyjs) (`simple` optimization) to create jquery.autotab.min.js.
+Autotab uses the [Closure Compiler](http://closure-compiler.appspot.com/) (`simple` optimization) to create jquery.autotab.min.js.
 
 
 ## Feedback
@@ -424,6 +476,6 @@ You can also reach out to me on twitter: [@mathachew](http://www.twitter.com/mat
 
 ## Copyright and license
 
-&copy; 2013 Matthew Miller
+&copy; 2014 Matthew Miller
 
 Licensed under the MIT licensing: http://www.opensource.org/licenses/mit-license.php

autotab.jquery.json

@@ -6,7 +6,7 @@
         "filter",
         "autotab"
     ],
-    "version": "1.6",
+    "version": "1.7",
     "author": {
         "name": "Mathachew",
         "url": "https://github.com/Mathachew"

component.json

@@ -1,6 +1,6 @@
 {
     "name": "jquery.autotab",
-    "version": "1.6",
+    "version": "1.7",
     "description": "A jQuery plugin that provides auto-tabbing and filtering on text fields in a form.",
     "main": [ "./js/jquery.autotab.min.js" ],
     "homepage": "https://github.com/Mathachew/jquery-autotab",

demo.html

@@ -4,13 +4,12 @@
     <head>
         <title>jQuery Autotab Demo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
         <script src="js/jquery.autotab.js"></script>
         <script>
         $(function () {
-            $('input[type=text], input[type=password]').autotab();
+            $.autotab({ tabOnSelect: true });
             $('.number').autotab('filter', 'number');
-            $('.ssn').autotab('filter', 'number');
             $('.text').autotab('filter', 'text');
             $('.alpha').autotab('filter', 'alpha');
             $('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true });
@@ -41,17 +40,20 @@
             });
             $('.hexadecimal').autotab('filter', 'hexadecimal');
             $('.ip').autotab('filter', { format: 'number', trigger: '.' });
-            $('.pin').autotab('filter', { format: 'number' });
+            $('.pin').autotab('filter', 'number');
 
             $('#remove-autotab').on('click', function () {
-                $('input[type=text]').autotab('remove');
+                $.autotab.remove();
                 $('#autotab-status span').removeClass('on').addClass('off').text('Off');
             });
 
             $('#restore-autotab').on('click', function () {
-                $('input[type=text]').autotab('restore');
+                $.autotab.restore();
                 $('#autotab-status span').removeClass('off').addClass('on').text('On');
             });
+
+            $('').on('click', function () {
+            });
         });
         </script>
 
@@ -104,7 +106,7 @@
             display: inline-block;
             font-size: 14px;
             margin: 10px 0;
-            outline: none;
+            /*outline: none;*/
             padding: 6px 12px;
             position: relative;
             text-align: center;
@@ -129,7 +131,11 @@
     <body>
         <div id="container">
             <h1>jQuery Autotab Demo</h1>
-            <p>Autotab's documentation can be found in <a href="https://github.com/Mathachew/jquery-autotab/blob/master/README.md">ReadMe.md</a> on GitHub.</p>
+            <p>Autotab's full documentation can be found in <a href="https://github.com/Mathachew/jquery-autotab/blob/master/README.md">ReadMe.md</a> on GitHub.</p>
+
+            <hr />
+
+            <p><strong>Note:</strong> For the purposes of this demo, I am calling <code>$.autotab()</code> to initialize the auto tabbing order.</p>
 
             <hr />
 
@@ -154,44 +160,7 @@ <h1>jQuery Autotab Demo</h1>
                     <input type="text" id="number3" class="number" maxlength="4" size="5" />
                 </div>
                 <pre>
-// Example 1
-$('input[type=text]').autotab();
-$('.number').autotab('filter', 'number');
-
-// Example 2
-$('.number').autotab();
 $('.number').autotab('filter', 'number');
-
-// Example 3
-$('#number1').autotab({ format: 'number', target: '#number2' });
-$('#number2').autotab({ format: 'number', target: '#number3', previous: '#number1' });
-$('#number3').autotab({ format: 'number', target: '#ssn1', previous: '#number2' });
-
-// Example 4
-// Note: Applies number formatting to all elements, but the last element lacks a target
-$('.number').autotab({ format: 'number' });
-$('#number3').autotab({ target: '#ssn1' });
-</pre>
-            </div>
-
-            <div>
-                <p>Examples from this point on will assume <code>$('input[type=text]').autotab()</code> is called.</p>
-            </div>
-
-            <hr />
-
-            <div>
-                <div class="example">
-                    <label for="ssn1">Social Security Number</label>
-
-                    <input type="text" id="ssn1" class="ssn" maxlength="3" size="3" />
-                    -
-                    <input type="text" id="ssn2" class="ssn" maxlength="2" size="3" />
-                    -
-                    <input type="text" id="ssn3" class="ssn" maxlength="4" size="5" />
-                </div>
-                <pre>
-$('.ssn').autotab('filter', 'number');
 </pre>
             </div>
 
@@ -256,28 +225,6 @@ <h1>jQuery Autotab Demo</h1>
 
             <hr />
 
-            <div>
-                <div class="example">
-                    <label for="all1">Any and all characters</label>
-
-                    <input type="text" id="all1" class="all" maxlength="5" size="4" />
-                    -
-                    <input type="text" id="all2" class="all" maxlength="5" size="4" />
-                    -
-                    <input type="text" id="all3" class="all" maxlength="5" size="4" />
-                    -
-                    <input type="text" id="all4" class="all" maxlength="5" size="4" />
-                    -
-                    <input type="text" id="all5" class="all" maxlength="5" size="4" />
-                </div>
-                <pre>
-// Note: This call is not necessary as 'all' is the default format
-$('.all').autotab('filter', 'all');
-</pre>
-            </div>
-
-            <hr />
-
             <div>
                 <div class="example">
                     <label for="regex">Regular Expression (Allows numbers and periods)</label>
@@ -292,7 +239,7 @@ <h1>jQuery Autotab Demo</h1>
 
             <div>
                 <div class="example">
-                    <label for="function">Custom Function (Range of 1-12, even if the second digit is greater than 2)</label>
+                    <label for="function">Custom Function that forces a number range of 1 to 12</label>
                     <input type="text" id="function" maxlength="2" size="3" />
                 </div>
                 <pre>
@@ -380,7 +327,39 @@ <h1>jQuery Autotab Demo</h1>
                     <input type="password" id="pin2" class="pin" maxlength="3" size="4" />
                 </div>
                 <pre>
-$('.pin').autotab('filter', { format: 'number' });
+$('.pin').autotab('filter', 'number');
+</pre>
+            </div>
+
+            <hr />
+
+            <div>
+                <div class="example">
+                    <label for="all1">Any and all characters with tabbing support on non-text form fields. Textarea will auto tab when the defined <code>maxlength</code> is reached, disabled fields are skipped entirely, and the select list will auto tab when a value is selected. Auto tabbing on select lists only applies for single select and is configurable using <code>tabOnSelect</code>.</label>
+
+                    <input type="text" id="all1" class="all" maxlength="5" size="4" />
+                    <input type="text" id="all2" class="all" maxlength="3" size="1" disabled="disabled" value="zxy" />
+                    <input type="text" id="all3" class="all" maxlength="5" size="4" />
+                    <br />
+                    <button value="button">Standard Button</button> <input type="submit" value="Submit Button" /> <button value="button" disabled="disabled">Disabled Button</button> 
+                    <br />
+                    <select>
+                        <option>First</option>
+                        <option>Second</option>
+                        <option>Third</option>
+                    </select>
+                    <br />
+                    <input type="radio" name="radio" />
+                    <br />
+                    <input type="checkbox" />
+                    <br />
+                    <textarea cols="20" rows="2" maxlength="10" class="all"></textarea>
+                    <br />
+                    <input type="text" id="all4" class="all" maxlength="5" size="4" />
+                </div>
+                <pre>
+// Note: This call is not necessary as 'all' is the default format
+$('.all').autotab('filter', 'all');
 </pre>
             </div>
         </div>