css styleable masks

CHANGELOG.md

@@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file.
 
 ## [UNRELEASED]
 ### Added
+- colorMask option ~ css styleable mask
 - jquery.loader.js => main in package.json
 
 ### Updates
@@ -12,6 +13,7 @@ All notable changes to this project will be documented in this file.
 - improve inputfallback (Android support)
 
 ### Fixed
+- Error on 3.3.3: Uncaught TypeError: Cannot set property 'generatedInput' of undefined #1399
 - ios 8, safari, on first visit unable to enter any characters #826
 - Numerica mask not run in Galaxy S5 + Chrome + Android #1357
 

README.md

@@ -997,6 +997,12 @@ Default: "verbatim"
 Specify the inputmode  - already in place for when browsers start to  support them
 https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute
 
+### colorMask
+Default: false
+Create a css styleable mask.  Defines css classes: im-caret, im-static.
+
+You need to include the inputmask.css in your page to use this option.
+
 ## General
 ### set a value and apply mask
 this can be done with the traditional jquery.val function (all browsers) or JavaScript value property for browsers which implement lookupGetter or getOwnPropertyDescriptor

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.3.4-18",
+  "version": "3.3.4-23",
   "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-18",
+  "version": "3.3.4-23",
   "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-18",
+  "version": "3.3.4-23",
   "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-18
+* Version: 3.3.4-23
 */
 !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-18
+* Version: 3.3.4-23
 */
 !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-18
+* Version: 3.3.4-23
 */
 !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);
@@ -34,7 +34,8 @@
             },
             mask: "(\\http://)|(\\http\\s://)|(ftp://)|(ftp\\s://)i{+}",
             insertMode: !1,
-            autoUnmask: !1
+            autoUnmask: !1,
+            inputmode: "url"
         },
         ip: {
             mask: "i[i[i]].i[i[i]].i[i[i]].i[i[i]]",
@@ -50,7 +51,8 @@
             },
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 return maskedValue;
-            }
+            },
+            inputmode: "numeric"
         },
         email: {
             mask: "*{1,64}[.*{1,64}][.*{1,64}][.*{1,63}]@-{1,63}.-{1,63}[.-{1,63}][.-{1,63}]",
@@ -72,7 +74,8 @@
             },
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 return maskedValue;
-            }
+            },
+            inputmode: "email"
         },
         mac: {
             mask: "##:##:##:##:##:##"

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-18
+* Version: 3.3.4-23
 */
 !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);
@@ -253,14 +253,10 @@
             minimalPos = minimalPos || 0;
             var ndxIntlzr, test, testPos, maskTemplate = [], pos = 0, lvp = getLastValidPosition();
             maxLength = void 0 !== el ? el.maxLength : void 0, maxLength === -1 && (maxLength = void 0);
-            do {
-                if (baseOnInput === !0 && getMaskSet().validPositions[pos]) {
-                    var validPos = getMaskSet().validPositions[pos];
-                    test = validPos.match, ndxIntlzr = validPos.locator.slice(), maskTemplate.push(includeInput === !0 ? validPos.input : getPlaceholder(pos, test));
-                } else testPos = getTestTemplate(pos, ndxIntlzr, pos - 1), test = testPos.match, 
-                ndxIntlzr = testPos.locator.slice(), (opts.jitMasking === !1 || pos < lvp || isFinite(opts.jitMasking) && opts.jitMasking > pos) && maskTemplate.push(getPlaceholder(pos, test));
-                pos++;
-            } while ((void 0 === maxLength || pos < maxLength) && (null !== test.fn || "" !== test.def) || minimalPos > pos);
+            do baseOnInput === !0 && getMaskSet().validPositions[pos] ? (testPos = getMaskSet().validPositions[pos], 
+            test = testPos.match, ndxIntlzr = testPos.locator.slice(), maskTemplate.push(includeInput === !0 ? testPos.input : getPlaceholder(pos, test))) : (testPos = getTestTemplate(pos, ndxIntlzr, pos - 1), 
+            test = testPos.match, ndxIntlzr = testPos.locator.slice(), (opts.jitMasking === !1 || pos < lvp || Number.isFinite(opts.jitMasking) && opts.jitMasking > pos) && maskTemplate.push(getPlaceholder(pos, test))), 
+            pos++; while ((void 0 === maxLength || pos < maxLength) && (null !== test.fn || "" !== test.def) || minimalPos > pos);
             return "" === maskTemplate[maskTemplate.length - 1] && maskTemplate.pop(), getMaskSet().maskLength = pos + 1, 
             maskTemplate;
         }
@@ -651,7 +647,7 @@
                         var testsFromPos = getTests(maskPos).slice();
                         "" === testsFromPos[testsFromPos.length - 1].match.def && testsFromPos.pop();
                         var staticChar = determineTestTemplate(testsFromPos, !0);
-                        staticChar && (staticChar = staticChar.match.placeholder || staticChar.match.def, 
+                        staticChar && null === staticChar.match.fn && (staticChar = staticChar.match.placeholder || staticChar.match.def, 
                         _isValid(maskPos, staticChar, strict), getMaskSet().validPositions[maskPos].generatedInput = !0);
                         for (var nPos = maskPos + 1, snPos = seekNext(maskPos); nPos <= snPos; nPos++) if (result = _isValid(nPos, c, strict), 
                         result !== !1) {
@@ -709,7 +705,8 @@
                 }
             }
             input.inputmask._valueSet(buffer.join("")), void 0 === caretPos || void 0 !== event && "blur" === event.type || caret(input, caretPos), 
-            triggerInputEvent === !0 && (skipInputEvent = !0, $(input).trigger("input"));
+            renderColorMask(input, buffer, caretPos), triggerInputEvent === !0 && (skipInputEvent = !0, 
+            $(input).trigger("input"));
         }
         function getPlaceholder(pos, test) {
             if (test = test || getTest(pos).match, void 0 !== test.placeholder) return test.placeholder;
@@ -1105,6 +1102,7 @@
                             caret(input, lastPosition);
                         }
                     }
+                    renderColorMask(input);
                 }
             }, 0);
         }
@@ -1151,20 +1149,57 @@
                 $el.trigger("setvalue");
             }, 0);
         }
+        function initializeColorMask(input) {
+            var offset = input.getBoundingClientRect(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+            colorMask = document.createElement("span"), colorMask.style.position = "absolute", 
+            colorMask.width = (offset.width ? offset.width : offset.right - offset.left) + "px", 
+            colorMask.height = (offset.height ? offset.height : offset.bottom - offset.top) + "px", 
+            colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + "px", 
+            colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + "px", 
+            colorMask.style.zIndex = isNaN(computedStyle.zIndex) ? -1 : computedStyle.zIndex - 1, 
+            colorMask.style.color = computedStyle.color, colorMask.style.fontSize = computedStyle.fontSize, 
+            colorMask.style.fontStyle = computedStyle.fontStyle, colorMask.style.fontFamily = computedStyle.fontFamily, 
+            input.style.color = "transparent", input.style.backgroundColor = "transparent", 
+            input.parentNode.insertBefore(colorMask, input.nextSibling);
+        }
+        function renderColorMask(input, buffer, caretPos) {
+            function handleStatic() {
+                static || null !== test.fn && void 0 !== testPos.input ? static && null !== test.fn && void 0 !== testPos.input && (static = !1, 
+                maskTemplate += "</span>") : (static = !0, maskTemplate += "<span class='im-static''>");
+            }
+            if (void 0 !== colorMask) {
+                buffer = buffer || getBuffer(), void 0 === caretPos ? caretPos = caret(input) : void 0 === caretPos.begin && (caretPos = {
+                    begin: caretPos,
+                    end: caretPos
+                });
+                var maskTemplate = "", static = !1;
+                if ("" != buffer) {
+                    var ndxIntlzr, test, testPos, pos = 0, lvp = getLastValidPosition();
+                    do pos === caretPos.begin && document.activeElement === input && (maskTemplate += "<span class='im-caret'>|</span>"), 
+                    getMaskSet().validPositions[pos] ? (testPos = getMaskSet().validPositions[pos], 
+                    test = testPos.match, ndxIntlzr = testPos.locator.slice(), handleStatic(), maskTemplate += testPos.input) : (testPos = getTestTemplate(pos, ndxIntlzr, pos - 1), 
+                    test = testPos.match, ndxIntlzr = testPos.locator.slice(), (opts.jitMasking === !1 || pos < lvp || Number.isFinite(opts.jitMasking) && opts.jitMasking > pos) && (handleStatic(), 
+                    maskTemplate += getPlaceholder(pos, test))), pos++; while ((void 0 === maxLength || pos < maxLength) && (null !== test.fn || "" !== test.def) || lvp > pos);
+                }
+                colorMask.innerHTML = maskTemplate;
+            }
+        }
         function mask(elem) {
             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), mobile && (el.setAttribute("inputmode", "verbatim"), 
-            el.setAttribute("x-inputmode", "verbatim")), 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), 
-            EventRuler.on(el, "focus", focusEvent), EventRuler.on(el, "mouseleave", mouseleaveEvent), 
+            el.removeAttribute("dir"), el.inputmask.isRTL = !0, isRTL = !0), opts.colorMask === !0 && initializeColorMask(el), 
+            mobile && (el.hasOwnProperty("inputmode") || el.hasOwnProperty("x-inputmode") ? (el.inputmode = opts.inputmode, 
+            el["x-inputmode"] = opts.inputmode) : (initializeColorMask(el), el.type = "password")), 
+            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), EventRuler.on(el, "focus", focusEvent), EventRuler.on(el, "mouseleave", mouseleaveEvent), 
             EventRuler.on(el, "click", clickEvent), EventRuler.on(el, "dblclick", dblclickEvent), 
             EventRuler.on(el, "paste", pasteEvent), EventRuler.on(el, "dragdrop", pasteEvent), 
             EventRuler.on(el, "drop", pasteEvent), EventRuler.on(el, "cut", cutEvent), EventRuler.on(el, "complete", opts.oncomplete), 
             EventRuler.on(el, "incomplete", opts.onincomplete), EventRuler.on(el, "cleared", opts.oncleared), 
             opts.inputEventOnly !== !0 && (EventRuler.on(el, "keydown", keydownEvent), EventRuler.on(el, "keypress", keypressEvent)), 
-            EventRuler.on(el, "compositionstart", $.noop), EventRuler.on(el, "compositionend", $.noop), 
+            EventRuler.on(el, "compositionstart", $.noop), EventRuler.on(el, "compositionupdate", $.noop), 
+            EventRuler.on(el, "compositionend", $.noop), EventRuler.on(el, "keyup", $.noop), 
             EventRuler.on(el, "input", inputFallBackEvent)), EventRuler.on(el, "setvalue", setValueEvent), 
             getBufferTemplate(), "" !== el.inputmask._valueGet() || opts.clearMaskOnLostFocus === !1 || document.activeElement === el) {
                 var initialValue = $.isFunction(opts.onBeforeMask) ? opts.onBeforeMask(el.inputmask._valueGet(), opts) || el.inputmask._valueGet() : el.inputmask._valueGet();
@@ -1175,7 +1210,7 @@
                 writeBuffer(el, buffer), document.activeElement === el && caret(el, seekNext(getLastValidPosition()));
             }
         }
-        var undoValue, el, $el, maxLength, valueBuffer, isRTL = !1, skipKeyPressEvent = !1, skipInputEvent = !1, composition = !1, ignorable = !1, mouseEnter = !0, EventRuler = {
+        var undoValue, el, $el, maxLength, colorMask, valueBuffer, isRTL = !1, skipKeyPressEvent = !1, skipInputEvent = !1, ignorable = !1, mouseEnter = !0, EventRuler = {
             on: function(input, eventName, eventHandler) {
                 var ev = function(e) {
                     if (void 0 === this.inputmask && "FORM" !== this.nodeName) {
@@ -1204,14 +1239,6 @@
                                         eventHandler.apply(that, args);
                                     }, 0), !1;
                                 }
-                                break;
-
-                              case "compositionstart":
-                                composition = !0;
-                                break;
-
-                              case "compositionend":
-                                composition = !1;
                             }
                             var returnVal = eventHandler.apply(this, arguments);
                             return returnVal === !1 && (e.preventDefault(), e.stopPropagation()), returnVal;
@@ -1374,7 +1401,9 @@
             inputEventOnly: !1,
             noValuePatching: !1,
             positionCaretOnClick: "lvp",
-            casing: null
+            casing: null,
+            inputmode: "verbatim",
+            colorMask: !1
         },
         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-18
+* Version: 3.3.4-23
 */
 !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);
@@ -69,6 +69,7 @@
             insertMode: !0,
             autoUnmask: !1,
             unmaskAsNumber: !1,
+            inputmode: "numeric",
             postFormat: function(buffer, pos, opts) {
                 opts.numericInput === !0 && (buffer = buffer.reverse(), isFinite(pos) && (pos = buffer.join("").length - pos - 1));
                 var i, l;

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-18
+* Version: 3.3.4-23
 */
 !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);
@@ -30,7 +30,8 @@
             },
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 return unmaskedValue;
-            }
+            },
+            inputmode: "tel"
         }
     }), 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-18
+* Version: 3.3.4-23
 */
 !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-18
+* Version: 3.3.4-23
 */
 !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-18
+* Version: 3.3.4-23
 */
 !function($) {
     function Inputmask(alias, options) {
@@ -251,14 +251,10 @@
             minimalPos = minimalPos || 0;
             var ndxIntlzr, test, testPos, maskTemplate = [], pos = 0, lvp = getLastValidPosition();
             maxLength = void 0 !== el ? el.maxLength : void 0, maxLength === -1 && (maxLength = void 0);
-            do {
-                if (baseOnInput === !0 && getMaskSet().validPositions[pos]) {
-                    var validPos = getMaskSet().validPositions[pos];
-                    test = validPos.match, ndxIntlzr = validPos.locator.slice(), maskTemplate.push(includeInput === !0 ? validPos.input : getPlaceholder(pos, test));
-                } else testPos = getTestTemplate(pos, ndxIntlzr, pos - 1), test = testPos.match, 
-                ndxIntlzr = testPos.locator.slice(), (opts.jitMasking === !1 || pos < lvp || isFinite(opts.jitMasking) && opts.jitMasking > pos) && maskTemplate.push(getPlaceholder(pos, test));
-                pos++;
-            } while ((void 0 === maxLength || pos < maxLength) && (null !== test.fn || "" !== test.def) || minimalPos > pos);
+            do baseOnInput === !0 && getMaskSet().validPositions[pos] ? (testPos = getMaskSet().validPositions[pos], 
+            test = testPos.match, ndxIntlzr = testPos.locator.slice(), maskTemplate.push(includeInput === !0 ? testPos.input : getPlaceholder(pos, test))) : (testPos = getTestTemplate(pos, ndxIntlzr, pos - 1), 
+            test = testPos.match, ndxIntlzr = testPos.locator.slice(), (opts.jitMasking === !1 || pos < lvp || Number.isFinite(opts.jitMasking) && opts.jitMasking > pos) && maskTemplate.push(getPlaceholder(pos, test))), 
+            pos++; while ((void 0 === maxLength || pos < maxLength) && (null !== test.fn || "" !== test.def) || minimalPos > pos);
             return "" === maskTemplate[maskTemplate.length - 1] && maskTemplate.pop(), getMaskSet().maskLength = pos + 1, 
             maskTemplate;
         }
@@ -649,7 +645,7 @@
                         var testsFromPos = getTests(maskPos).slice();
                         "" === testsFromPos[testsFromPos.length - 1].match.def && testsFromPos.pop();
                         var staticChar = determineTestTemplate(testsFromPos, !0);
-                        staticChar && (staticChar = staticChar.match.placeholder || staticChar.match.def, 
+                        staticChar && null === staticChar.match.fn && (staticChar = staticChar.match.placeholder || staticChar.match.def, 
                         _isValid(maskPos, staticChar, strict), getMaskSet().validPositions[maskPos].generatedInput = !0);
                         for (var nPos = maskPos + 1, snPos = seekNext(maskPos); nPos <= snPos; nPos++) if (result = _isValid(nPos, c, strict), 
                         result !== !1) {
@@ -707,7 +703,8 @@
                 }
             }
             input.inputmask._valueSet(buffer.join("")), void 0 === caretPos || void 0 !== event && "blur" === event.type || caret(input, caretPos), 
-            triggerInputEvent === !0 && (skipInputEvent = !0, $(input).trigger("input"));
+            renderColorMask(input, buffer, caretPos), triggerInputEvent === !0 && (skipInputEvent = !0, 
+            $(input).trigger("input"));
         }
         function getPlaceholder(pos, test) {
             if (test = test || getTest(pos).match, void 0 !== test.placeholder) return test.placeholder;
@@ -1103,6 +1100,7 @@
                             caret(input, lastPosition);
                         }
                     }
+                    renderColorMask(input);
                 }
             }, 0);
         }
@@ -1149,20 +1147,57 @@
                 $el.trigger("setvalue");
             }, 0);
         }
+        function initializeColorMask(input) {
+            var offset = input.getBoundingClientRect(), computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+            colorMask = document.createElement("span"), colorMask.style.position = "absolute", 
+            colorMask.width = (offset.width ? offset.width : offset.right - offset.left) + "px", 
+            colorMask.height = (offset.height ? offset.height : offset.bottom - offset.top) + "px", 
+            colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + "px", 
+            colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + "px", 
+            colorMask.style.zIndex = isNaN(computedStyle.zIndex) ? -1 : computedStyle.zIndex - 1, 
+            colorMask.style.color = computedStyle.color, colorMask.style.fontSize = computedStyle.fontSize, 
+            colorMask.style.fontStyle = computedStyle.fontStyle, colorMask.style.fontFamily = computedStyle.fontFamily, 
+            input.style.color = "transparent", input.style.backgroundColor = "transparent", 
+            input.parentNode.insertBefore(colorMask, input.nextSibling);
+        }
+        function renderColorMask(input, buffer, caretPos) {
+            function handleStatic() {
+                static || null !== test.fn && void 0 !== testPos.input ? static && null !== test.fn && void 0 !== testPos.input && (static = !1, 
+                maskTemplate += "</span>") : (static = !0, maskTemplate += "<span class='im-static''>");
+            }
+            if (void 0 !== colorMask) {
+                buffer = buffer || getBuffer(), void 0 === caretPos ? caretPos = caret(input) : void 0 === caretPos.begin && (caretPos = {
+                    begin: caretPos,
+                    end: caretPos
+                });
+                var maskTemplate = "", static = !1;
+                if ("" != buffer) {
+                    var ndxIntlzr, test, testPos, pos = 0, lvp = getLastValidPosition();
+                    do pos === caretPos.begin && document.activeElement === input && (maskTemplate += "<span class='im-caret'>|</span>"), 
+                    getMaskSet().validPositions[pos] ? (testPos = getMaskSet().validPositions[pos], 
+                    test = testPos.match, ndxIntlzr = testPos.locator.slice(), handleStatic(), maskTemplate += testPos.input) : (testPos = getTestTemplate(pos, ndxIntlzr, pos - 1), 
+                    test = testPos.match, ndxIntlzr = testPos.locator.slice(), (opts.jitMasking === !1 || pos < lvp || Number.isFinite(opts.jitMasking) && opts.jitMasking > pos) && (handleStatic(), 
+                    maskTemplate += getPlaceholder(pos, test))), pos++; while ((void 0 === maxLength || pos < maxLength) && (null !== test.fn || "" !== test.def) || lvp > pos);
+                }
+                colorMask.innerHTML = maskTemplate;
+            }
+        }
         function mask(elem) {
             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), mobile && (el.setAttribute("inputmode", "verbatim"), 
-            el.setAttribute("x-inputmode", "verbatim")), 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), 
-            EventRuler.on(el, "focus", focusEvent), EventRuler.on(el, "mouseleave", mouseleaveEvent), 
+            el.removeAttribute("dir"), el.inputmask.isRTL = !0, isRTL = !0), opts.colorMask === !0 && initializeColorMask(el), 
+            mobile && (el.hasOwnProperty("inputmode") || el.hasOwnProperty("x-inputmode") ? (el.inputmode = opts.inputmode, 
+            el["x-inputmode"] = opts.inputmode) : (initializeColorMask(el), el.type = "password")), 
+            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), EventRuler.on(el, "focus", focusEvent), EventRuler.on(el, "mouseleave", mouseleaveEvent), 
             EventRuler.on(el, "click", clickEvent), EventRuler.on(el, "dblclick", dblclickEvent), 
             EventRuler.on(el, "paste", pasteEvent), EventRuler.on(el, "dragdrop", pasteEvent), 
             EventRuler.on(el, "drop", pasteEvent), EventRuler.on(el, "cut", cutEvent), EventRuler.on(el, "complete", opts.oncomplete), 
             EventRuler.on(el, "incomplete", opts.onincomplete), EventRuler.on(el, "cleared", opts.oncleared), 
             opts.inputEventOnly !== !0 && (EventRuler.on(el, "keydown", keydownEvent), EventRuler.on(el, "keypress", keypressEvent)), 
-            EventRuler.on(el, "compositionstart", $.noop), EventRuler.on(el, "compositionend", $.noop), 
+            EventRuler.on(el, "compositionstart", $.noop), EventRuler.on(el, "compositionupdate", $.noop), 
+            EventRuler.on(el, "compositionend", $.noop), EventRuler.on(el, "keyup", $.noop), 
             EventRuler.on(el, "input", inputFallBackEvent)), EventRuler.on(el, "setvalue", setValueEvent), 
             getBufferTemplate(), "" !== el.inputmask._valueGet() || opts.clearMaskOnLostFocus === !1 || document.activeElement === el) {
                 var initialValue = $.isFunction(opts.onBeforeMask) ? opts.onBeforeMask(el.inputmask._valueGet(), opts) || el.inputmask._valueGet() : el.inputmask._valueGet();
@@ -1173,7 +1208,7 @@
                 writeBuffer(el, buffer), document.activeElement === el && caret(el, seekNext(getLastValidPosition()));
             }
         }
-        var undoValue, el, $el, maxLength, valueBuffer, isRTL = !1, skipKeyPressEvent = !1, skipInputEvent = !1, composition = !1, ignorable = !1, mouseEnter = !0, EventRuler = {
+        var undoValue, el, $el, maxLength, colorMask, valueBuffer, isRTL = !1, skipKeyPressEvent = !1, skipInputEvent = !1, ignorable = !1, mouseEnter = !0, EventRuler = {
             on: function(input, eventName, eventHandler) {
                 var ev = function(e) {
                     if (void 0 === this.inputmask && "FORM" !== this.nodeName) {
@@ -1202,14 +1237,6 @@
                                         eventHandler.apply(that, args);
                                     }, 0), !1;
                                 }
-                                break;
-
-                              case "compositionstart":
-                                composition = !0;
-                                break;
-
-                              case "compositionend":
-                                composition = !1;
                             }
                             var returnVal = eventHandler.apply(this, arguments);
                             return returnVal === !1 && (e.preventDefault(), e.stopPropagation()), returnVal;
@@ -1372,7 +1399,9 @@
             inputEventOnly: !1,
             noValuePatching: !1,
             positionCaretOnClick: "lvp",
-            casing: null
+            casing: null,
+            inputmode: "verbatim",
+            colorMask: !1
         },
         masksCache: {},
         mask: function(elems) {
@@ -2079,7 +2108,8 @@
             },
             mask: "(\\http://)|(\\http\\s://)|(ftp://)|(ftp\\s://)i{+}",
             insertMode: !1,
-            autoUnmask: !1
+            autoUnmask: !1,
+            inputmode: "url"
         },
         ip: {
             mask: "i[i[i]].i[i[i]].i[i[i]].i[i[i]]",
@@ -2095,7 +2125,8 @@
             },
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 return maskedValue;
-            }
+            },
+            inputmode: "numeric"
         },
         email: {
             mask: "*{1,64}[.*{1,64}][.*{1,64}][.*{1,63}]@-{1,63}.-{1,63}[.-{1,63}][.-{1,63}]",
@@ -2117,7 +2148,8 @@
             },
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 return maskedValue;
-            }
+            },
+            inputmode: "email"
         },
         mac: {
             mask: "##:##:##:##:##:##"
@@ -2197,6 +2229,7 @@
             insertMode: !0,
             autoUnmask: !1,
             unmaskAsNumber: !1,
+            inputmode: "numeric",
             postFormat: function(buffer, pos, opts) {
                 opts.numericInput === !0 && (buffer = buffer.reverse(), isFinite(pos) && (pos = buffer.join("").length - pos - 1));
                 var i, l;
@@ -2539,7 +2572,8 @@
             },
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 return unmaskedValue;
-            }
+            },
+            inputmode: "tel"
         }
     }), Inputmask;
 }(jQuery, Inputmask), function($, Inputmask) {

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-18
+* Version: 3.3.4-23
 */
 !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

@@ -0,0 +1,56 @@
+.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 {
+		color: black;
+	}
+	50% {
+		color: transparent;
+	}
+}
+
+@-moz-keyframes blink {
+	from, to {
+		color: black;
+	}
+	50% {
+		color: transparent;
+	}
+}
+
+@-webkit-keyframes blink {
+	from, to {
+		color: black;
+	}
+	50% {
+		color: transparent;
+	}
+}
+
+@-ms-keyframes blink {
+	from, to {
+		color: black;
+	}
+	50% {
+		color: transparent;
+	}
+}
+
+@-o-keyframes blink {
+	from, to {
+		color: black;
+	}
+	50% {
+		color: transparent;
+	}
+}
+
+.im-static {
+	color: grey;
+}

js/inputmask.js

@@ -121,7 +121,8 @@
 			noValuePatching: false, //dev option - disable value property patching
 			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 support them
+			inputmode: "verbatim", //specify the inputmode  - already in place for when browsers will support it
+			colorMask: false //enable css styleable mask
 		},
 		masksCache: {},
 		mask: function (elems) {
@@ -743,7 +744,8 @@
 			composition = false,
 			ignorable = false,
 			maxLength,
-			mouseEnter = true;
+			mouseEnter = true,
+			colorMask;
 
 		//maskset helperfunctions
 		function getMaskTemplate(baseOnInput, minimalPos, includeInput) {
@@ -755,10 +757,10 @@
 			if (maxLength === -1) maxLength = undefined;
 			do {
 				if (baseOnInput === true && getMaskSet().validPositions[pos]) {
-					var validPos = getMaskSet().validPositions[pos];
-					test = validPos.match;
-					ndxIntlzr = validPos.locator.slice();
-					maskTemplate.push(includeInput === true ? validPos.input : getPlaceholder(pos, test));
+					testPos = getMaskSet().validPositions[pos];
+					test = testPos.match;
+					ndxIntlzr = testPos.locator.slice();
+					maskTemplate.push(includeInput === true ? testPos.input : getPlaceholder(pos, test));
 				} else {
 					testPos = getTestTemplate(pos, ndxIntlzr, pos - 1);
 					test = testPos.match;
@@ -1616,7 +1618,7 @@
 						var testsFromPos = getTests(maskPos).slice();
 						if (testsFromPos[testsFromPos.length - 1].match.def === "") testsFromPos.pop();
 						var staticChar = determineTestTemplate(testsFromPos, true);
-						if (staticChar) {
+						if (staticChar && staticChar.match.fn === null) {
 							staticChar = staticChar.match.placeholder || staticChar.match.def;
 							_isValid(maskPos, staticChar, strict);
 							getMaskSet().validPositions[maskPos].generatedInput = true;
@@ -1717,6 +1719,7 @@
 			if (caretPos !== undefined && (event === undefined || event.type !== "blur")) {
 				caret(input, caretPos);
 			}
+			renderColorMask(input, buffer, caretPos);
 			if (triggerInputEvent === true) {
 				skipInputEvent = true;
 				$(input).trigger("input");
@@ -2024,18 +2027,6 @@
 									return false;
 								}
 								break;
-							// case "compositionstart":
-							// 	console.log("composition start");
-							// 	break;
-							// case "compositionupdate":
-							// 	console.log("Composition update " + e.originalEvent ? e.originalEvent.data : e.data);
-							// 	break;
-							// case "compositionend":
-							// 	console.log("Composition End " + e.originalEvent ? e.originalEvent.data : e.data);
-							// 	break;
-							// case "keyup":
-							// 	console.log("keyup " + e.keyCode);
-							// 	break;
 						}
 						// console.log("executed " + e.type);
 						var returnVal = eventHandler.apply(this, arguments);
@@ -2603,6 +2594,7 @@
 								break;
 						}
 					}
+					renderColorMask(input);
 				}
 			}, 0);
 		}
@@ -2708,6 +2700,79 @@
 			}, 0);
 		}
 
+		function initializeColorMask(input) {
+			// needs computedstyle
+			var offset = input.getBoundingClientRect();
+			var computedStyle = (input.ownerDocument.defaultView || window).getComputedStyle(input, null);
+
+			colorMask = document.createElement("span");
+			//positioning
+			colorMask.style.position = "absolute";
+			colorMask.width = (offset.width ? offset.width : offset.right - offset.left) + "px";
+			colorMask.height = (offset.height ? offset.height : offset.bottom - offset.top) + "px";
+			colorMask.style.top = offset.top + parseInt(computedStyle.borderTopWidth) + 'px';
+			colorMask.style.left = offset.left + parseInt(computedStyle.borderLeftWidth) + 'px';
+			colorMask.style.zIndex = isNaN(computedStyle.zIndex) ? -1 : computedStyle.zIndex - 1;
+			//styling
+			colorMask.style.color = computedStyle.color;
+			colorMask.style.fontSize = computedStyle.fontSize;
+			colorMask.style.fontStyle = computedStyle.fontStyle;
+			colorMask.style.fontFamily = computedStyle.fontFamily;
+
+			input.style.color = "transparent";
+			input.style.backgroundColor = "transparent";
+			input.parentNode.insertBefore(colorMask, input.nextSibling);
+		}
+
+		function renderColorMask(input, buffer, caretPos) {
+			function handleStatic() {
+				if (!static && (test.fn === null || testPos.input === undefined)) {
+					static = true;
+					maskTemplate += "<span class='im-static''>"
+				} else if (static && (test.fn !== null && testPos.input !== undefined)) {
+					static = false;
+					maskTemplate += "</span>"
+				}
+			}
+
+			if (colorMask !== undefined) {
+				buffer = buffer || getBuffer();
+				if (caretPos === undefined) {
+					caretPos = caret(input);
+				} else if (caretPos.begin === undefined) {
+					caretPos = {begin: caretPos, end: caretPos};
+				}
+
+				var maskTemplate = "", static = false;
+				if (buffer != "") {
+					var ndxIntlzr, pos = 0,
+						test, testPos, lvp = getLastValidPosition();
+					do {
+						if (pos === caretPos.begin && document.activeElement === input) {
+							maskTemplate += "<span class='im-caret'>|</span>";
+						}
+						if (getMaskSet().validPositions[pos]) {
+							testPos = getMaskSet().validPositions[pos];
+							test = testPos.match;
+							ndxIntlzr = testPos.locator.slice();
+							handleStatic();
+							maskTemplate += testPos.input;
+						} else {
+							testPos = getTestTemplate(pos, ndxIntlzr, pos - 1);
+							test = testPos.match;
+							ndxIntlzr = testPos.locator.slice();
+							if (opts.jitMasking === false || pos < lvp || (Number.isFinite(opts.jitMasking) && opts.jitMasking > pos)) {
+								handleStatic();
+								maskTemplate += getPlaceholder(pos, test);
+							}
+						}
+						pos++;
+					} while ((maxLength === undefined || pos < maxLength) && (test.fn !== null || test.def !== "") || lvp > pos);
+				}
+				colorMask.innerHTML = maskTemplate;
+			}
+		}
+
 		function mask(elem) {
 			el = elem;
 			$el = $(el);
@@ -2728,9 +2793,18 @@
 				isRTL = true;
 			}
 
+			if (opts.colorMask === true) {
+				initializeColorMask(el);
+			}
+
 			if (mobile) {
-				el.setAttribute("inputmode", opts.inputmode);
-				el.setAttribute("x-inputmode", opts.inputmode);
+				if (el.hasOwnProperty("inputmode") || el.hasOwnProperty("x-inputmode")) {
+					el["inputmode"] = opts.inputmode;
+					el["x-inputmode"] = opts.inputmode;
+				} else {
+					initializeColorMask(el);
+					el.type = "password";
+				}
 			}
 
 			//unbind all events - to make sure that no other mask will interfere when re-masking

package.json

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