Merge pull request #10 from Mathachew/dev

Firefox and demo improvements, and intelligent pasting
Mathachew · Nov 12, 2013 · 6bd7ee4 · 6bd7ee4
2 parents 672e798 + 99e8f26
commit 6bd7ee4
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 91 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## 1.4 (2013-11-12)
+
+Features:
+
+* pasting support has been greatly improved and behaves more intelligently
+* improved support in Firefox so that special keys no longer have to be tracked in order to be allowed
+
+Bug fixes:
+
+* fixed a bug where the `del` key would do nothing in Firefox (introduced in 1.3)
+* fixed several instances of bad evaluations of boolean values as a result of browsers storing data-* differently (introduced in 1.3)
+
+
 ## 1.3 (2013-11-09)
 
 Features:

diff --git a/README.md b/README.md
@@ -10,8 +10,6 @@ Autotab is a jQuery plugin that provides auto tabbing and filtering on text fiel
 * Populate multiple text fields by pasting into one.
 * It is small, fast, easy to load and built on the powerful jQuery library.
 
-_Pasting support has basic functionality and has a lot of room for improvement, so use at your own risk._
-
 
 ## Table of Contents
 * [Requirements](#requirements)

diff --git a/demo.html b/demo.html
@@ -14,8 +14,8 @@
             $('.text').autotab('filter', 'text');
             $('.alpha').autotab('filter', 'alpha');
             $('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true });
-            $('#regex').autotab({ format: 'custom', pattern: '[^0-9\.]', maxlength: 15 });
-            $('#function').autotab(function (value, element) {
+            $('#regex').autotab('filter', { format: 'custom', pattern: '[^0-9\.]', maxlength: 15 });
+            $('#function').autotab('filter', function (value, element) {
                 var parsedValue = parseInt(value, 10);
 
                 if (!value || parsedValue != value) {
@@ -248,7 +248,7 @@ <h1>jQuery Autotab Demo</h1>
                     <input type="text" id="alphanumeric5" class="alphanumeric" maxlength="5" size="4" />
                 </div>
                 <pre>
-$('.alphanumeric').autotab('filter', 'alphanumeric');
+$('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true });
 </pre>
             </div>
 
@@ -327,21 +327,21 @@ <h1>jQuery Autotab Demo</h1>
                 <div class="example">
                     <label for="regex">Hexadecimal (Allows numbers, a-f, and A-F)</label>
 
-                    <input type="text" id="hexadecimal1" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal1" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal2" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal2" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal3" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal3" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal4" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal4" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal5" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal5" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal6" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal6" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal7" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal7" class="hexadecimal" maxlength="4" size="3" />
                     :
-                    <input type="text" id="hexadecimal8" class="hexadecimal" maxlength="4" size="2" />
+                    <input type="text" id="hexadecimal8" class="hexadecimal" maxlength="4" size="3" />
                 </div>
                 <pre>
 $('.hexadecimal').autotab('filter', 'hexadecimal');

diff --git a/js/jquery.autotab.js b/js/jquery.autotab.js
@@ -1,5 +1,5 @@
 /**
- * Autotab - jQuery plugin 1.3
+ * Autotab - jQuery plugin 1.4
  * https://github.com/Mathachew/jquery-autotab
  * 
  * Copyright (c) 2013 Matthew Miller
@@ -54,7 +54,7 @@
         settings.firefox = e.getAttribute('data-autotab-Firefox') || (typeof InstallTrigger !== 'undefined');
 
         // Save settings on first run
-        if (!settings.loaded) {
+        if (settings.loaded != 'true' && settings.loaded !== true) {
             setSettings(e, settings);
         }
 
@@ -212,16 +212,16 @@
             value = value.replace(pattern, '');
         }
 
-        if (defaults.nospace) {
+        if (defaults.nospace == 'true' || defaults.nospace === true) {
             pattern = new RegExp('[ ]+', 'g');
             value = value.replace(pattern, '');
         }
 
-        if (defaults.uppercase) {
+        if (defaults.uppercase == 'true' || defaults.uppercase === true) {
             value = value.toUpperCase();
         }
 
-        if (defaults.lowercase) {
+        if (defaults.lowercase == 'true' || defaults.lowercase === true) {
             value = value.toLowerCase();
         }
 
@@ -264,7 +264,7 @@
             defaults.target = null;
         }
 
-        if (!defaults.loaded) {
+        if (settings.loaded != 'true' && settings.loaded !== true) {
             defaults.loaded = true;
             setSettings(element, defaults);
         }
@@ -303,7 +303,7 @@
 
                 // When setting value = value, Firefox will not place the cursor at the end of a textbox
                 // when the cursor was last at any point before the final character within the same textbox
-                if (defaults.firefox) {
+                if (defaults.firefox == 'true' || defaults.firefox === true) {
                     var length = defaults.previous.val().length;
                     defaults.previous[0].setSelectionRange(length, length);
                 }
@@ -316,7 +316,7 @@
         }).on('keydown', function (e) {
             var defaults = getSettings(this);
 
-            if (!defaults || defaults.disabled == 'true') {
+            if (!defaults || defaults.disabled == 'true' || defaults.disabled === true) {
                 return true;
             }
 
@@ -349,18 +349,17 @@
                 return true;
             }
 
+            // e.charCode == 0 indicates a special key has been pressed, which only Firefox triggers
+            if (((defaults.firefox == 'true' || defaults.firefox === true) && e.charCode === 0) || e.ctrlKey || e.altKey) {
+                return true;
+            }
+
             var keyCode = e.which || e.keyCode,
                 keyChar = filterValue(this, String.fromCharCode(keyCode), defaults),
                 hasValue = document.selection && document.selection.createRange ? true : (e.charCode > 0);
 
-            if (e.ctrlKey || e.altKey) {
-                return true;
-            }
-
             if (hasValue && (keyChar === null || keyChar === '')) {
-                // Returns true whenever a paste is occurring
-                // Speficially added for Firefox
-                return e.ctrlKey;
+                return false;
             }
 
             // Many, many thanks to Tim Down for this solution: http://stackoverflow.com/a/3923320/94656
@@ -422,22 +421,6 @@
                 }
             }
 
-            // Firefox doesn't behave properly when trying to backspace or move through
-            // a text box with the arrow keys
-            if (defaults.firefox == 'true' || defaults.firefox === true) {
-                var keys = '8,9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,144,145';
-
-                if (keys.indexOf(keyCode) == -1 && typeof keyCode !== 'undefined') {
-                    if (this.value.length == defaults.maxlength) {
-                        $(this).trigger('autotab-next', defaults);
-                    }
-
-                    return false;
-                }
-
-                return true;
-            }
-
             if (this.value.length == defaults.maxlength) {
                 $(this).trigger('autotab-next', defaults);
             }
@@ -450,57 +433,57 @@
                 return true;
             }
 
-            var handlePaste = function (e, originalValue, previousValue) {
-                if (!e) {
-                    return;
-                }
+            this.maxLength = 2147483647;
 
-                var settings = getSettings(e),
-                    maxLength = e.maxLength;
+            (function (e, originDefaults) {
+                setTimeout(function () {
+                    var lastIndex = -1,
+                        hiddenInput = document.createElement('input');
+                    hiddenInput.type = 'hidden';
+                    hiddenInput.value = e.value.toLowerCase();
 
-                if (!defaults || defaults.disabled == 'true' || defaults.disabled === true) {
-                    return true;
-                }
+                    e.maxLength = originDefaults.maxlength;
+                    e.value = filterValue(e, e.value, originDefaults).substr(0, originDefaults.maxlength);
 
-                setSettings(e, defaults);
+                    var handlePaste = function (e, previousValue) {
+                        if (!e) {
+                            return;
+                        }
 
-                e.maxLength = 2147483647;
+                        for (var i = 0, count = previousValue.length; i < count; i++) {
+                            lastIndex = hiddenInput.value.indexOf(previousValue.charAt(i), lastIndex) + 1;
+                        }
 
-                setTimeout(function () {
-                    if (originalValue === null) {
-                        originalValue = e.value;
-                    }
+                        var defaults = getSettings(e),
+                            trimmedValue = hiddenInput.value.substr(lastIndex),
+                            filteredValue = filterValue(e, trimmedValue, defaults).substr(0, defaults.maxlength);
 
-                    var filteredValue;
+                        if (!filteredValue) {
+                            e.value = '';
+                            return;
+                        }
 
-                    // Truncate the pasted text up to the previous element's filtered value
-                    if (previousValue !== null) {
-                        filteredValue = filterValue(e, originalValue.substr(originalValue.indexOf(previousValue) + previousValue.length), defaults).substr(0, maxLength);
-                    }
-                    else {
-                        filteredValue = filterValue(e, originalValue, defaults).substr(0, maxLength);
-                    }
+                        e.value = filteredValue;
 
-                    e.maxLength = maxLength;
+                        if (filteredValue.length == defaults.maxlength) {
+                            $(e).trigger('autotab-next', defaults);
 
-                    if (!filteredValue) {
-                        e.value = '';
-                        return;
-                    }
+                            if (defaults.iOS != 'true' && defaults.iOS !== true) {
+                                handlePaste(defaults.target[0], filteredValue);
+                            }
+                        }
 
-                    e.value = filteredValue;
+                    };
 
-                    if (filteredValue.length == maxLength) {
+                    if (e.value.length == originDefaults.maxlength) {
                         $(e).trigger('autotab-next', defaults);
 
                         if (defaults.iOS != 'true' && defaults.iOS !== true) {
-                            handlePaste(defaults.target[0], originalValue, filteredValue);
+                            handlePaste(originDefaults.target[0], e.value.toLowerCase());
                         }
                     }
                 }, 1);
-            };
-
-            handlePaste(this, null, null);
+            })(this, defaults);
         });
     };