fix positioning

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.3.4-34",
+  "version": "3.3.4-35",
   "main": [
 	  "./dist/inputmask/inputmask.loader.js"
   ],

component.json

@@ -2,7 +2,7 @@
   "name": "jquery_inputmask",
   "repository": "robinherbots/jquery.inputmask",
   "description": "jquery.inputmask is a jquery plugin which create an input mask.",
-  "version": "3.3.4-34",
+  "version": "3.3.4-35",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "main": "./dist/inputmask/inputmask.loader.js",
   "scripts": [

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "robinherbots/jquery.inputmask",
   "description": "jquery.inputmask is a jquery plugin which create an input mask.",
-  "version": "3.3.4-34",
+  "version": "3.3.4-35",
   "type": "library",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "homepage": "http://robinherbots.github.io/jquery.inputmask",

dist/inputmask/inputmask.date.extensions.js

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

dist/inputmask/inputmask.dependencyLib.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2016 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.3.4-34
+* Version: 3.3.4-35
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define("inputmask.dependencyLib", [ "jquery" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery")) : factory(jQuery);

dist/inputmask/inputmask.extensions.js

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

dist/inputmask/inputmask.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2016 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.3.4-34
+* Version: 3.3.4-35
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define("inputmask", [ "inputmask.dependencyLib" ], factory) : "object" == typeof exports ? module.exports = factory(require("./inputmask.dependencyLib")) : factory(window.dependencyLib || jQuery);
@@ -1157,29 +1157,31 @@
             function charSize() {
                 var e = document.createElement("span"), width = 0;
                 return e.style.visibility = "hidden", e.style.whiteSpace = "nowrap", e.style.fontSize = computedStyle.fontSize, 
-                e.style.fontFamily = computedStyle.fontFamily, e.innerHTML = "0", input.parentNode.insertBefore(e, input.nextSibling), 
-                width = e.offsetWidth, input.parentNode.removeChild(e), width;
+                e.style.fontFamily = computedStyle.fontFamily, e.innerHTML = "0", parentNode.insertBefore(e, input.nextSibling), 
+                width = e.offsetWidth, parentNode.removeChild(e), width;
             }
             function position() {
-                colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + parseInt(computedStyle.paddingTop) + "px", 
-                colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + parseInt(computedStyle.paddingLeft) + "px", 
-                colorMask.style.width = parseInt(computedStyle.width) - (parseInt(computedStyle.paddingLeft) + parseInt(computedStyle.paddingRight) + parseInt(computedStyle.borderRightWidth)) + "px", 
-                colorMask.style.height = parseInt(computedStyle.height) - (parseInt(computedStyle.paddingTop) + parseInt(computedStyle.paddingBottom) + parseInt(computedStyle.borderBottomWidth)) + "px", 
+                colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + "px", 
+                colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + "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.padding = computedStyle.padding, colorMask.style.margin = computedStyle.margin, 
                 colorMask.style.lineHeight = colorMask.style.height;
             }
-            var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+            var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), parentNode = input.parentNode;
             colorMask = document.createElement("div"), colorMask.style.position = "absolute", 
             position(), colorMask.style.color = computedStyle.color, colorMask.style.backgroundColor = computedStyle.backgroundColor, 
             colorMask.style.fontSize = computedStyle.fontSize, colorMask.style.fontStyle = computedStyle.fontStyle, 
             colorMask.style.fontFamily = computedStyle.fontFamily, colorMask.style.letterSpacing = computedStyle.letterSpacing, 
-            input.style.color = "transparent", input.parentNode.insertBefore(colorMask, input.nextSibling), 
+            input.style.color = "transparent", parentNode.insertBefore(colorMask, input.nextSibling), 
             $(window).on("resize", function(e) {
                 offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), 
                 position();
-            }), EventRuler.off(input, "mouseenter"), $(input.nextSibling).on("mouseenter", function(e) {
+            }), EventRuler.off(input, "mouseenter"), $(colorMask).on("mouseenter", function(e) {
                 mouseenterEvent.call(input, e);
-            }), $(input.nextSibling).on("click", function(e) {
-                input.focus(), caret(input, Math.floor(e.clientX / charSize())), $(input).trigger("click");
+            }), $(colorMask).on("click", function(e) {
+                input.focus(), caret(input, Math.floor((e.clientX - parseInt(computedStyle.paddingLeft)) / charSize())), 
+                $(input).trigger("click");
             });
         }
         function renderColorMask(input, buffer, caretPos) {

dist/inputmask/inputmask.numeric.extensions.js

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

dist/inputmask/inputmask.phone.extensions.js

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

dist/inputmask/inputmask.regex.extensions.js

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

dist/inputmask/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2016 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.3.4-34
+* Version: 3.3.4-35
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery, window.Inputmask);

dist/jquery.inputmask.bundle.js

@@ -3,7 +3,7 @@
 * https://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2016 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.3.4-34
+* Version: 3.3.4-35
 */
 !function($) {
     function Inputmask(alias, options) {
@@ -1155,29 +1155,31 @@
             function charSize() {
                 var e = document.createElement("span"), width = 0;
                 return e.style.visibility = "hidden", e.style.whiteSpace = "nowrap", e.style.fontSize = computedStyle.fontSize, 
-                e.style.fontFamily = computedStyle.fontFamily, e.innerHTML = "0", input.parentNode.insertBefore(e, input.nextSibling), 
-                width = e.offsetWidth, input.parentNode.removeChild(e), width;
+                e.style.fontFamily = computedStyle.fontFamily, e.innerHTML = "0", parentNode.insertBefore(e, input.nextSibling), 
+                width = e.offsetWidth, parentNode.removeChild(e), width;
             }
             function position() {
-                colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + parseInt(computedStyle.paddingTop) + "px", 
-                colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + parseInt(computedStyle.paddingLeft) + "px", 
-                colorMask.style.width = parseInt(computedStyle.width) - (parseInt(computedStyle.paddingLeft) + parseInt(computedStyle.paddingRight) + parseInt(computedStyle.borderRightWidth)) + "px", 
-                colorMask.style.height = parseInt(computedStyle.height) - (parseInt(computedStyle.paddingTop) + parseInt(computedStyle.paddingBottom) + parseInt(computedStyle.borderBottomWidth)) + "px", 
+                colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + "px", 
+                colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + "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.padding = computedStyle.padding, colorMask.style.margin = computedStyle.margin, 
                 colorMask.style.lineHeight = colorMask.style.height;
             }
-            var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+            var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), parentNode = input.parentNode;
             colorMask = document.createElement("div"), colorMask.style.position = "absolute", 
             position(), colorMask.style.color = computedStyle.color, colorMask.style.backgroundColor = computedStyle.backgroundColor, 
             colorMask.style.fontSize = computedStyle.fontSize, colorMask.style.fontStyle = computedStyle.fontStyle, 
             colorMask.style.fontFamily = computedStyle.fontFamily, colorMask.style.letterSpacing = computedStyle.letterSpacing, 
-            input.style.color = "transparent", input.parentNode.insertBefore(colorMask, input.nextSibling), 
+            input.style.color = "transparent", parentNode.insertBefore(colorMask, input.nextSibling), 
             $(window).on("resize", function(e) {
                 offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), 
                 position();
-            }), EventRuler.off(input, "mouseenter"), $(input.nextSibling).on("mouseenter", function(e) {
+            }), EventRuler.off(input, "mouseenter"), $(colorMask).on("mouseenter", function(e) {
                 mouseenterEvent.call(input, e);
-            }), $(input.nextSibling).on("click", function(e) {
-                input.focus(), caret(input, Math.floor(e.clientX / charSize())), $(input).trigger("click");
+            }), $(colorMask).on("click", function(e) {
+                input.focus(), caret(input, Math.floor((e.clientX - parseInt(computedStyle.paddingLeft)) / charSize())), 
+                $(input).trigger("click");
             });
         }
         function renderColorMask(input, buffer, caretPos) {

dist/min/inputmask/inputmask.dependencyLib.min.js

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

extra/css/inputmask.css

@@ -1,5 +1,6 @@
 /*input{*/
 	/*padding: 0 20px;*/
+	/*margin: 5px;*/
 	/*height:60px;*/
 	/*box-sizing:border-box;*/
 /*}*/

js/inputmask.js

@@ -2714,23 +2714,26 @@
 				e.style.fontSize = computedStyle.fontSize;
 				e.style.fontFamily = computedStyle.fontFamily;
 				e.innerHTML = "0";
-				input.parentNode.insertBefore(e, input.nextSibling);
+				parentNode.insertBefore(e, input.nextSibling);
 				width = e.offsetWidth;
-				input.parentNode.removeChild(e);
+				parentNode.removeChild(e);
 				return width;
 			}
 
 			function position() {
-				colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + parseInt(computedStyle.paddingTop) + "px";
-				colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + parseInt(computedStyle.paddingLeft) + "px";
-				colorMask.style.width = parseInt(computedStyle.width) - (parseInt(computedStyle.paddingLeft) + parseInt(computedStyle.paddingRight) + parseInt(computedStyle.borderRightWidth)) + "px";
-				colorMask.style.height = parseInt(computedStyle.height) - (parseInt(computedStyle.paddingTop) + parseInt(computedStyle.paddingBottom) + parseInt(computedStyle.borderBottomWidth) ) + "px";
-				colorMask.style.lineHeight = colorMask.style.height;
+				colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + "px";
+				colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + "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.padding = computedStyle.padding;
+				colorMask.style.margin = computedStyle.margin;
+				colorMask.style.lineHeight = colorMask.style.height;
 			}
 
 			var offset = $(input).position(),
-				computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+				computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null),
+				parentNode = input.parentNode;
 
 			colorMask = document.createElement("div");
 			//positioning
@@ -2745,7 +2748,7 @@
 			colorMask.style.letterSpacing = computedStyle.letterSpacing;
 
 			input.style.color = "transparent";
-			input.parentNode.insertBefore(colorMask, input.nextSibling);
+			parentNode.insertBefore(colorMask, input.nextSibling);
 
 			//event passthrough
 			$(window).on("resize", function (e) {
@@ -2754,10 +2757,10 @@
 				position();
 			});
 			EventRuler.off(input, "mouseenter");
-			$(input.nextSibling).on("mouseenter", function (e) {
+			$(colorMask).on("mouseenter", function (e) {
 				mouseenterEvent.call(input, e);
 			});
-			$(input.nextSibling).on("click", function (e) {
+			$(colorMask).on("click", function (e) {
 				input.focus();
 				caret(input, Math.floor((e.clientX - parseInt(computedStyle.paddingLeft)) / charSize()));
 				$(input).trigger("click");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.3.4-34",
+  "version": "3.3.4-35",
   "description": "jquery.inputmask is a jquery plugin which create an input mask.",
   "main": "./dist/inputmask/inputmask.loader.js",
   "files": [