some positioning updates

README.md

@@ -998,11 +998,17 @@ Specify the inputmode  - already in place for when browsers start to  support th
 https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute
 
 ### colorMask
-Default: false
+Default: null (~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.
+You need to include the inputmask.css in your page to use this option in full.
+
+#### Android note!
+The colorMask is enabled by default when running on Android and the inputtype of the input element is changed to password.
+This is to disable the predictive text which can cause undesired results of input and the colorMask will mimick normal behavior.
+
+You can disable this by explicitly setting colorMask: false option.
 
 ## General
 ### set a value and apply mask

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.3.4-33",
+  "version": "3.3.4-34",
   "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-33",
+  "version": "3.3.4-34",
   "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-33",
+  "version": "3.3.4-34",
   "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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !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);
@@ -1160,20 +1160,22 @@
                 e.style.fontFamily = computedStyle.fontFamily, e.innerHTML = "0", input.parentNode.insertBefore(e, input.nextSibling), 
                 width = e.offsetWidth, input.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.lineHeight = colorMask.style.height;
+            }
             var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
             colorMask = document.createElement("div"), colorMask.style.position = "absolute", 
-            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 = computedStyle.width, colorMask.style.height = computedStyle.height, 
-            colorMask.style.color = computedStyle.color, colorMask.style.backgroundColor = computedStyle.backgroundColor, 
+            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), 
             $(window).on("resize", function(e) {
                 offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), 
-                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 = computedStyle.width, colorMask.style.height = computedStyle.height;
+                position();
             }), EventRuler.off(input, "mouseenter"), $(input.nextSibling).on("mouseenter", function(e) {
                 mouseenterEvent.call(input, e);
             }), $(input.nextSibling).on("click", function(e) {
@@ -1206,7 +1208,7 @@
             if (el = elem, $el = $(el), opts.showTooltip && (el.title = opts.tooltip || getMaskSet().mask), 
             ("rtl" === el.dir || opts.rightAlign) && (el.style.textAlign = "right"), ("rtl" === el.dir || opts.numericInput) && (el.dir = "ltr", 
             el.removeAttribute("dir"), el.inputmask.isRTL = !0, isRTL = !0), opts.colorMask === !0 && initializeColorMask(el), 
-            android && (el.hasOwnProperty("inputmode") ? (el.inputmode = opts.inputmode, el.setAttribute("inputmode", opts.inputmode)) : (el.type = "password", 
+            android && (el.hasOwnProperty("inputmode") ? (el.inputmode = opts.inputmode, el.setAttribute("inputmode", opts.inputmode)) : opts.colorMask !== !1 && (el.type = "password", 
             opts.colorMask !== !0 && initializeColorMask(el))), EventRuler.off(el), patchValueProperty(el), 
             isElementTypeSupported(el, opts) && (EventRuler.on(el, "submit", submitEvent), EventRuler.on(el, "reset", resetEvent), 
             EventRuler.on(el, "mouseenter", mouseenterEvent), EventRuler.on(el, "blur", blurEvent), 
@@ -1421,7 +1423,7 @@
             positionCaretOnClick: "lvp",
             casing: null,
             inputmode: "verbatim",
-            colorMask: !1
+            colorMask: null
         },
         masksCache: {},
         mask: function(elems) {

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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !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-33
+* Version: 3.3.4-34
 */
 !function($) {
     function Inputmask(alias, options) {
@@ -1158,20 +1158,22 @@
                 e.style.fontFamily = computedStyle.fontFamily, e.innerHTML = "0", input.parentNode.insertBefore(e, input.nextSibling), 
                 width = e.offsetWidth, input.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.lineHeight = colorMask.style.height;
+            }
             var offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
             colorMask = document.createElement("div"), colorMask.style.position = "absolute", 
-            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 = computedStyle.width, colorMask.style.height = computedStyle.height, 
-            colorMask.style.color = computedStyle.color, colorMask.style.backgroundColor = computedStyle.backgroundColor, 
+            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), 
             $(window).on("resize", function(e) {
                 offset = $(input).position(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null), 
-                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 = computedStyle.width, colorMask.style.height = computedStyle.height;
+                position();
             }), EventRuler.off(input, "mouseenter"), $(input.nextSibling).on("mouseenter", function(e) {
                 mouseenterEvent.call(input, e);
             }), $(input.nextSibling).on("click", function(e) {
@@ -1204,7 +1206,7 @@
             if (el = elem, $el = $(el), opts.showTooltip && (el.title = opts.tooltip || getMaskSet().mask), 
             ("rtl" === el.dir || opts.rightAlign) && (el.style.textAlign = "right"), ("rtl" === el.dir || opts.numericInput) && (el.dir = "ltr", 
             el.removeAttribute("dir"), el.inputmask.isRTL = !0, isRTL = !0), opts.colorMask === !0 && initializeColorMask(el), 
-            android && (el.hasOwnProperty("inputmode") ? (el.inputmode = opts.inputmode, el.setAttribute("inputmode", opts.inputmode)) : (el.type = "password", 
+            android && (el.hasOwnProperty("inputmode") ? (el.inputmode = opts.inputmode, el.setAttribute("inputmode", opts.inputmode)) : opts.colorMask !== !1 && (el.type = "password", 
             opts.colorMask !== !0 && initializeColorMask(el))), EventRuler.off(el), patchValueProperty(el), 
             isElementTypeSupported(el, opts) && (EventRuler.on(el, "submit", submitEvent), EventRuler.on(el, "reset", resetEvent), 
             EventRuler.on(el, "mouseenter", mouseenterEvent), EventRuler.on(el, "blur", blurEvent), 
@@ -1419,7 +1421,7 @@
             positionCaretOnClick: "lvp",
             casing: null,
             inputmode: "verbatim",
-            colorMask: !1
+            colorMask: null
         },
         masksCache: {},
         mask: function(elems) {

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-33
+* Version: 3.3.4-34
 */
 !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,3 +1,11 @@
+/*input{*/
+	/*padding: 0 20px;*/
+	/*height:60px;*/
+	/*box-sizing:border-box;*/
+/*}*/
+
+
+
 .im-caret {
 	-webkit-animation: 1s blink step-end infinite;
 	-moz-animation: 1s blink step-end infinite;

extra/dependencyLibs/inputmask.dependencyLib.js

@@ -246,6 +246,9 @@
 				}
 			}
 			return this;
+		},
+		position: function () {
+			alert("todo");
 		}
 	};
 

js/inputmask.js

@@ -122,7 +122,7 @@
 			positionCaretOnClick: "lvp", //none, lvp (based on the last valid position (default), radixFocus (position caret to radixpoint on initial click)
 			casing: null, //mask-level casing. Options: null, "upper", "lower" or "title"
 			inputmode: "verbatim", //specify the inputmode  - already in place for when browsers will support it
-			colorMask: false //enable css styleable mask
+			colorMask: null, //enable css styleable mask
 		},
 		masksCache: {},
 		mask: function (elems) {
@@ -2720,16 +2720,22 @@
 				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;
+
+			}
+
 			var offset = $(input).position(),
 				computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
 
 			colorMask = document.createElement("div");
 			//positioning
 			colorMask.style.position = "absolute";
-			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 = computedStyle.width;
-			colorMask.style.height = computedStyle.height;
+			position();
 			//styling
 			colorMask.style.color = computedStyle.color;
 			colorMask.style.backgroundColor = computedStyle.backgroundColor;
@@ -2745,12 +2751,7 @@
 			$(window).on("resize", function (e) {
 				offset = $(input).position();
 				computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
-
-				//positioning
-				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 = computedStyle.width;
-				colorMask.style.height = computedStyle.height;
+				position();
 			});
 			EventRuler.off(input, "mouseenter");
 			$(input.nextSibling).on("mouseenter", function (e) {
@@ -2840,7 +2841,7 @@
 				if (el.hasOwnProperty("inputmode")) {
 					el.inputmode = opts.inputmode;
 					el.setAttribute("inputmode", opts.inputmode);
-				} else {
+				} else if (opts.colorMask !== false) {
 					el.type = "password";
 					if (opts.colorMask !== true)
 						initializeColorMask(el);

package.json

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