Colormask enhancements - #1635

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file.
 - importDataAttributes option #1633
 
 ### Updates
+- colorMask enhancement: better positioning and more controllable via inputmask.css
 - remove maxLength attribute on android #1490
 - drop Regex alias
 - enhance inputfallback (Android)

README.md

@@ -1055,10 +1055,18 @@ https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute
 ### colorMask
 Default: false
 Create a css styleable mask.
-Uses css classes: im-caret, im-static.
 
-You need to include the inputmask.css in your page to use this option in full.
+You need to include the inputmask.css in your page to use this option.
 
+See the inputmask.css for more info about the used styling.
+You can override the Inputmask.prototype.positionColorMask`if you need some custom positioning.
+```
+ Inputmask.prototype.positionColorMask = function (input, template) {
+                template.style.left = input.offsetLeft + "px";
+                template.zIndex = input.zIndex - 1;
+           }
+```
+ 
 ### importDataAttributes
 Specify to use the data-inputmask attributes or to ignore them.
 

README_android.md

@@ -24,10 +24,10 @@ This is not enabled by default, because I find that the developer should be awar
 
 What it does.
 - changes the input type to password => disabled predictive text
-- enables the colorMask option which creates a div which is positioned above the input.
-So we type in the hidden password input and render the mask in the created div.
-Be aware that by changing the type to password that all css you targeted for type=text will not be applied anymore.
-You will need to adapt your css for it.  It is possible that the div is not well positioned.  If so, open an issue for it with a jsfiddle.
+- enables the colorMask option which creates a div, which surrounds the input.  
+So we type in the hidden password input and render the mask in the a created div.
+
+To use the colorMask, you need to include the inputmask.css you might need to add some css-tweaks to make it all visually correct in your page.
 
 To enable the workaround add the androidHack option to your individual masks or globally by setting defaults.
 You should set the option to "rtfm".

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "4.0.1-4",
+  "version": "4.0.1-5",
   "main": [
 	  "./dist/inputmask/inputmask.js",
 	  "./dist/inputmask/inputmask.extensions.js",

component.json

@@ -2,7 +2,7 @@
 	"name": "inputmask",
 	"repository": "robinherbots/Inputmask",
 	"description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
-	"version": "4.0.1-4",
+	"version": "4.0.1-5",
 	"keywords": [
 		"jquery",
 		"plugins",

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "robinherbots/inputmask",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
-  "version": "4.0.1-4",
+  "version": "4.0.1-5",
   "type": "library",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "homepage": "http://robinherbots.github.io/Inputmask",

css/inputmask.css

@@ -1,56 +1,86 @@
-.im-caret {
-	-webkit-animation: 1s blink step-end infinite;
-	-moz-animation: 1s blink step-end infinite;
-	-ms-animation: 1s blink step-end infinite;
-	-o-animation: 1s blink step-end infinite;
-	animation: 1s blink step-end infinite;
+span.im-caret {
+    -webkit-animation: 1s blink step-end infinite;
+    -moz-animation: 1s blink step-end infinite;
+    -ms-animation: 1s blink step-end infinite;
+    -o-animation: 1s blink step-end infinite;
+    animation: 1s blink step-end infinite;
 }
 
 @keyframes blink {
-	from, to {
-		border-right-color: black;
-	}
-	50% {
-		border-right-color: transparent;
-	}
+    from, to {
+        border-right-color: black;
+    }
+    50% {
+        border-right-color: transparent;
+    }
 }
 
 @-moz-keyframes blink {
-	from, to {
-		border-right-color: black;
-	}
-	50% {
-		border-right-color: transparent;
-	}
+    from, to {
+        border-right-color: black;
+    }
+    50% {
+        border-right-color: transparent;
+    }
 }
 
 @-webkit-keyframes blink {
-	from, to {
-		border-right-color: black;
-	}
-	50% {
-		border-right-color: transparent;
-	}
+    from, to {
+        border-right-color: black;
+    }
+    50% {
+        border-right-color: transparent;
+    }
 }
 
 @-ms-keyframes blink {
-	from, to {
-		border-right-color: black;
-	}
-	50% {
-		border-right-color: transparent;
-	}
+    from, to {
+        border-right-color: black;
+    }
+    50% {
+        border-right-color: transparent;
+    }
 }
 
 @-o-keyframes blink {
-	from, to {
-		border-right-color: black;
-	}
-	50% {
-		border-right-color: transparent;
-	}
+    from, to {
+        border-right-color: black;
+    }
+    50% {
+        border-right-color: transparent;
+    }
 }
 
-.im-static {
-	color: grey;
+span.im-static {
+    color: grey;
 }
+
+div.im-colormask {
+    display: inline-block;
+    border-style: inset;
+    border-width: 2px;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+div.im-colormask > input {
+    display: inline-block;
+    background-color: transparent;
+    color: transparent;
+    -webkit-appearance: caret;
+    -moz-appearance: caret;
+    appearance: caret;
+    border-style: none;
+}
+
+div.im-colormask > input:focus {
+    outline: none;
+}
+
+div.im-colormask > div {
+    position: absolute;
+    display: inline-block;
+    left: 0; /*calculated*/
+    z-index: -1; /*calculated*/
+}

dist/inputmask/bindings/inputmask.binding.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/dependencyLibs/inputmask.dependencyLib.jqlite.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/dependencyLibs/inputmask.dependencyLib.jquery.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/dependencyLibs/inputmask.dependencyLib.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {
@@ -93,12 +93,6 @@
                 "global" === namespace) for (var nmsp in eventRegistry[ev]) for (i = 0; i < eventRegistry[ev][nmsp].length; i++) eventRegistry[ev][nmsp][i].apply(elem, arguments); else for (i = 0; i < eventRegistry[ev][namespace].length; i++) eventRegistry[ev][namespace][i].apply(elem, arguments);
             }
             return this;
-        },
-        position: function() {
-            if (isValidElement(this[0])) return {
-                top: this[0].offsetTop,
-                left: this[0].offsetLeft
-            };
         }
     }, DependencyLib.isFunction = function(obj) {
         return "function" === type(obj);

dist/inputmask/global/document.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 "function" == typeof define && define.amd ? define(function() {

dist/inputmask/global/window.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 "function" == typeof define && define.amd ? define(function() {

dist/inputmask/inputmask.date.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/inputmask.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/inputmask.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {
@@ -728,23 +728,10 @@
                 }
                 return document.body.removeChild(e), caretPos;
             }
-            function position() {
-                colorMask.style.position = "absolute", colorMask.style.top = offset.top + "px", 
-                colorMask.style.left = offset.left + "px", colorMask.style.width = parseInt(input.offsetWidth) - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight) - parseInt(computedStyle.borderLeftWidth) - parseInt(computedStyle.borderRightWidth) + "px", 
-                colorMask.style.height = parseInt(input.offsetHeight) - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) - parseInt(computedStyle.borderTopWidth) - parseInt(computedStyle.borderBottomWidth) + "px", 
-                colorMask.style.lineHeight = colorMask.style.height, colorMask.style.zIndex = isNaN(computedStyle.zIndex) ? -1 : computedStyle.zIndex - 1, 
-                colorMask.style.webkitAppearance = "textfield", colorMask.style.mozAppearance = "textfield", 
-                colorMask.style.Appearance = "textfield";
-            }
-            var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
-            colorMask = document.createElement("div"), document.body.appendChild(colorMask);
-            for (var style in computedStyle) computedStyle.hasOwnProperty(style) && isNaN(style) && "cssText" !== style && -1 == style.indexOf("webkit") && (colorMask.style[style] = computedStyle[style]);
-            input.style.backgroundColor = "transparent", input.style.color = "transparent", 
-            input.style.webkitAppearance = "caret", input.style.mozAppearance = "caret", input.style.Appearance = "caret", 
-            position(), $(window).on("resize", function(e) {
-                offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), 
-                position();
-            }), $(input).on("click", function(e) {
+            var computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+            colorMask = document.createElement("div"), colorMask.className = "im-colormask", 
+            input.parentNode.insertBefore(colorMask, input), input.parentNode.removeChild(input), 
+            colorMask.appendChild(input), $(input).on("click", function(e) {
                 return caret(input, findCaretPos(e.clientX)), EventHandlers.clickEvent.call(this, [ e ]);
             }), $(input).on("keydown", function(e) {
                 e.shiftKey || !1 === opts.insertMode || setTimeout(function() {
@@ -754,17 +741,16 @@
         }
         function renderColorMask(input, buffer, caretPos) {
             function handleStatic() {
-                isStatic || null !== test.fn && testPos.input !== undefined ? isStatic && null !== test.fn && testPos.input !== undefined && (isStatic = !1, 
+                isStatic || null !== test.fn && testPos.input !== undefined ? isStatic && (null !== test.fn && testPos.input !== undefined || "" === test.def) && (isStatic = !1, 
                 maskTemplate += "</span>") : (isStatic = !0, maskTemplate += "<span class='im-static'>");
             }
+            var test, testPos, maskTemplate = "", isStatic = !1;
             if (colorMask !== undefined) {
-                buffer = buffer || getBuffer(), caretPos === undefined ? caretPos = caret(input) : caretPos.begin === undefined && (caretPos = {
+                if (buffer = buffer || getBuffer(), caretPos === undefined ? caretPos = caret(input) : caretPos.begin === undefined && (caretPos = {
                     begin: caretPos,
                     end: caretPos
-                });
-                var maskTemplate = "", isStatic = !1;
-                if ("" != buffer) {
-                    var ndxIntlzr, test, testPos, pos = 0, lvp = getLastValidPosition();
+                }), "" !== buffer) {
+                    var ndxIntlzr, pos = 0, lvp = getLastValidPosition();
                     do {
                         pos === caretPos.begin && document.activeElement === input && (maskTemplate += "<span class='im-caret' style='border-right-width: 1px;border-right-style: solid;'></span>"), 
                         getMaskSet().validPositions[pos] ? (testPos = getMaskSet().validPositions[pos], 
@@ -772,12 +758,15 @@
                         test = testPos.match, ndxIntlzr = testPos.locator.slice(), (!1 === opts.jitMasking || pos < lvp || "number" == typeof opts.jitMasking && isFinite(opts.jitMasking) && opts.jitMasking > pos) && (handleStatic(), 
                         maskTemplate += getPlaceholder(pos, test))), pos++;
                     } while ((maxLength === undefined || pos < maxLength) && (null !== test.fn || "" !== test.def) || lvp > pos);
+                    isStatic && handleStatic();
                 }
-                colorMask.innerHTML = maskTemplate;
+                var oldTemplate = colorMask.getElementsByTagName("div")[0], template = document.createElement("div");
+                template.innerHTML = maskTemplate, oldTemplate && colorMask.removeChild(oldTemplate), 
+                colorMask.appendChild(template), input.inputmask.positionColorMask(input, template);
             }
         }
         maskset = maskset || this.maskset, opts = opts || this.opts;
-        var undoValue, $el, maxLength, colorMask, valueBuffer, el = this.el, isRTL = this.isRTL, skipKeyPressEvent = !1, skipInputEvent = !1, ignorable = !1, mouseEnter = !1, EventRuler = {
+        var undoValue, $el, maxLength, colorMask, el = this.el, isRTL = this.isRTL, skipKeyPressEvent = !1, skipInputEvent = !1, ignorable = !1, mouseEnter = !1, EventRuler = {
             on: function(input, eventName, eventHandler) {
                 var ev = function(e) {
                     if (this.inputmask === undefined && "FORM" !== this.nodeName) {
@@ -1069,6 +1058,10 @@
                 }, 0);
             }
         };
+        Inputmask.prototype.positionColorMask = function(input, template) {
+            template.style.left = input.offsetLeft + "px", template.zIndex = input.zIndex - 1;
+        };
+        var valueBuffer;
         if (actionObj !== undefined) switch (actionObj.action) {
           case "isComplete":
             return el = actionObj.el, isComplete(getBuffer());

dist/inputmask/inputmask.numeric.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/inputmask.phone.extensions.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-be.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-nl.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-ru.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone-uk.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/inputmask/phone-codes/phone.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(factory) {

dist/min/inputmask/dependencyLibs/inputmask.dependencyLib.jquery.min.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 !function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):window.dependencyLib=a(jQuery)}(function(a){return a});

dist/min/inputmask/global/document.min.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 "function"==typeof define&&define.amd?define(function(){return document}):"object"==typeof exports&&(module.exports=document);

dist/min/inputmask/global/window.min.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2017 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 4.0.1-4
+* Version: 4.0.1-5
 */
 
 "function"==typeof define&&define.amd?define(function(){return window}):"object"==typeof exports&&(module.exports=window);

js/dependencyLibs/inputmask.dependencyLib.js

@@ -254,14 +254,6 @@
                 }
             }
             return this;
-        },
-        position: function () {
-            if (isValidElement(this[0])) {
-                return {
-                    top: this[0].offsetTop,
-                    left: this[0].offsetLeft
-                };
-            }
         }
     };
 

js/inputmask.js

@@ -2863,9 +2863,7 @@
 
 
             function initializeColorMask(input) {
-                var offset = $(input).position(),
-                    computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
-                // parentNode = input.parentNode;
+                var computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
 
                 function findCaretPos(clientx) {
                     //calculate text width
@@ -2901,47 +2899,12 @@
                     return caretPos;
                 }
 
-                function position() {
-                    colorMask.style.position = "absolute";
-                    colorMask.style.top = offset.top + "px";
-                    colorMask.style.left = offset.left + "px";
-                    colorMask.style.width = parseInt(input.offsetWidth) - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight) - parseInt(computedStyle.borderLeftWidth) - parseInt(computedStyle.borderRightWidth) + "px";
-                    colorMask.style.height = parseInt(input.offsetHeight) - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) - parseInt(computedStyle.borderTopWidth) - parseInt(computedStyle.borderBottomWidth) + "px";
-
-                    colorMask.style.lineHeight = colorMask.style.height;
-                    colorMask.style.zIndex = isNaN(computedStyle.zIndex) ? -1 : computedStyle.zIndex - 1;
-                    colorMask.style.webkitAppearance = "textfield";
-                    colorMask.style.mozAppearance = "textfield";
-                    colorMask.style.Appearance = "textfield";
-
-                }
-
-
                 colorMask = document.createElement("div");
-                document.body.appendChild(colorMask); //insert at body to prevent css clash :last-child for example
-                for (var style in computedStyle) { //clone styles
-                    if (computedStyle.hasOwnProperty(style)) {
-                        if (isNaN(style) && style !== "cssText" && style.indexOf("webkit") == -1) {
-                            colorMask.style[style] = computedStyle[style];
-                        }
-                    }
-                }
+                colorMask.className = "im-colormask";
+                input.parentNode.insertBefore(colorMask, input);
+                input.parentNode.removeChild(input);
+                colorMask.appendChild(input);
 
-                //restyle input
-                input.style.backgroundColor = "transparent";
-                input.style.color = "transparent";
-                input.style.webkitAppearance = "caret";
-                input.style.mozAppearance = "caret";
-                input.style.Appearance = "caret";
-
-                position();
-
-                //event passthrough
-                $(window).on("resize", function (e) {
-                    offset = $(input).position();
-                    computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
-                    position();
-                });
                 $(input).on("click", function (e) {
                     caret(input, findCaretPos(e.clientX));
                     return EventHandlers.clickEvent.call(this, [e]);
@@ -2955,12 +2918,19 @@
                 });
             }
 
+            Inputmask.prototype.positionColorMask = function (input, template) {
+                template.style.left = input.offsetLeft + "px";
+                template.zIndex = input.zIndex - 1;
+            }
+
             function renderColorMask(input, buffer, caretPos) {
+                var maskTemplate = "", isStatic = false, test, testPos;
+
                 function handleStatic() {
                     if (!isStatic && (test.fn === null || testPos.input === undefined)) {
                         isStatic = true;
                         maskTemplate += "<span class='im-static'>"
-                    } else if (isStatic && (test.fn !== null && testPos.input !== undefined)) {
+                    } else if (isStatic && ((test.fn !== null && testPos.input !== undefined) || test.def === "")) {
                         isStatic = false;
                         maskTemplate += "</span>"
                     }
@@ -2974,10 +2944,8 @@
                         caretPos = {begin: caretPos, end: caretPos};
                     }
 
-                    var maskTemplate = "", isStatic = false;
-                    if (buffer != "") {
-                        var ndxIntlzr, pos = 0,
-                            test, testPos, lvp = getLastValidPosition();
+                    if (buffer !== "") {
+                        var ndxIntlzr, pos = 0, lvp = getLastValidPosition();
                         do {
                             if (pos === caretPos.begin && document.activeElement === input) {
                                 maskTemplate += "<span class='im-caret' style='border-right-width: 1px;border-right-style: solid;'></span>";
@@ -2999,8 +2967,15 @@
                             }
                             pos++;
                         } while ((maxLength === undefined || pos < maxLength) && (test.fn !== null || test.def !== "") || lvp > pos);
+                        if (isStatic) handleStatic();
                     }
-                    colorMask.innerHTML = maskTemplate;
+
+                    var oldTemplate = colorMask.getElementsByTagName('div')[0],
+                        template = document.createElement("div");
+                    template.innerHTML = maskTemplate;
+                    if (oldTemplate) colorMask.removeChild(oldTemplate);
+                    colorMask.appendChild(template);
+                    input.inputmask.positionColorMask(input, template);
                 }
             }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "4.0.1-4",
+  "version": "4.0.1-5",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
   "main": "index.js",
   "files": [