improve colormask posiitoning

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inputmask",
-  "version": "4.0.1-12",
+  "version": "4.0.1-13",
   "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-12",
+	"version": "4.0.1-13",
 	"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-12",
+  "version": "4.0.1-13",
   "type": "library",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "homepage": "http://robinherbots.github.io/Inputmask",

css/inputmask.css

@@ -83,5 +83,4 @@ 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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !function(factory) {

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-12
+* Version: 4.0.1-13
 */
 
 "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-12
+* Version: 4.0.1-13
 */
 
 "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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !function(factory) {
@@ -728,12 +728,14 @@
                 }
                 return document.body.removeChild(e), caretPos;
             }
-            var computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+            function clickHandler(e) {
+                return input.focus(), caret(input, findCaretPos(e.clientX)), EventHandlers.clickEvent.call(input, [ e ]);
+            }
+            var computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), template = document.createElement("div");
             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) {
+            colorMask.appendChild(input), colorMask.appendChild(template), $(input).on("click", clickHandler), 
+            $(template).on("click", clickHandler), $(input).on("keydown", function(e) {
                 e.shiftKey || !1 === opts.insertMode || setTimeout(function() {
                     renderColorMask(input);
                 }, 0);
@@ -762,9 +764,8 @@
                     } while ((maxLength === undefined || pos < maxLength) && (null !== test.fn || "" !== test.def) || lvp > pos || isStatic);
                     -1 === maskTemplate.indexOf("im-caret") && handleCaret(!0), isStatic && handleStatic();
                 }
-                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);
+                var template = colorMask.getElementsByTagName("div")[0];
+                template.innerHTML = maskTemplate, input.inputmask.positionColorMask(input, template);
             }
         }
         maskset = maskset || this.maskset, opts = opts || this.opts;
@@ -1062,7 +1063,7 @@
             }
         };
         Inputmask.prototype.positionColorMask = function(input, template) {
-            template.style.left = input.offsetLeft + "px", template.zIndex = input.zIndex - 1;
+            template.style.left = input.offsetLeft + "px";
         };
         var valueBuffer;
         if (actionObj !== undefined) switch (actionObj.action) {

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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 !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-12
+* Version: 4.0.1-13
 */
 
 "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-12
+* Version: 4.0.1-13
 */
 
 "function"==typeof define&&define.amd?define(function(){return window}):"object"==typeof exports&&(module.exports=window);

js/inputmask.js

@@ -2905,16 +2905,21 @@
                     return caretPos;
                 }
 
+                var template = document.createElement("div");
                 colorMask = document.createElement("div");
                 colorMask.className = "im-colormask";
                 input.parentNode.insertBefore(colorMask, input);
                 input.parentNode.removeChild(input);
                 colorMask.appendChild(input);
+                colorMask.appendChild(template);
 
-                $(input).on("click", function (e) {
+                function clickHandler(e) {
+                    input.focus();
                     caret(input, findCaretPos(e.clientX));
-                    return EventHandlers.clickEvent.call(this, [e]);
-                });
+                    return EventHandlers.clickEvent.call(input, [e]);
+                };
+                $(input).on("click", clickHandler);
+                $(template).on("click", clickHandler);
                 $(input).on("keydown", function (e) {
                     if (!e.shiftKey && opts.insertMode !== false) {
                         setTimeout(function () {
@@ -2926,7 +2931,6 @@
 
             Inputmask.prototype.positionColorMask = function (input, template) {
                 template.style.left = input.offsetLeft + "px";
-                template.zIndex = input.zIndex - 1;
             }
 
             function renderColorMask(input, caretPos, clear) {
@@ -2980,11 +2984,8 @@
                         if (isStatic) handleStatic();
                     }
 
-                    var oldTemplate = colorMask.getElementsByTagName('div')[0],
-                        template = document.createElement("div");
+                    var template = colorMask.getElementsByTagName('div')[0];
                     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-12",
+  "version": "4.0.1-13",
   "description": "Inputmask is a javascript library which creates an input mask.  Inputmask can run against vanilla javascript, jQuery and jqlite.",
   "main": "index.js",
   "files": [