Input mask can't be applied on other HTML5 input types #828

CHANGELOG.md

@@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file.
 
 ## [UNRELEASED]
 ### Added
+- supportsInputType option
 - staticDefinitionSymbol (see readme)
 - include textarea as a valid masking element
 
@@ -12,6 +13,7 @@ All notable changes to this project will be documented in this file.
 - update alternation logic
 
 ### Fixed
+- Input mask can't be applied on other HTML5 input types #828
 - IE9 SCRIPT445: Object does not support this action #1135
 - Multiple Mask Click Focus Error #1133
 - Double enter for submit #1131

README.md

@@ -135,9 +135,13 @@ As dependencyLib you can choose between the supported libraries.
 ### Allowed HTML-elements
 - `<input type="text">`
 - `<input type="tel">`
+- `<input type="password">`
 - `<div contenteditable="true">` (and all others supported by contenteditable)
+- `<textarea>`
 - any html-element (mask text content or set maskedvalue with jQuery.val)
 
+The allowed input types are defined in the supportsInputType option.  You may add extra types as you which, ex: number, be aware that those input types will not always work as they restrict the input already. ([input-type-ref])
+
 ### Default masking definitions
 - `9` : numeric
 - `a` : alphabetical
@@ -1072,3 +1076,4 @@ When cloning a inputmask, the inputmask reactivates on the first event (mouseent
 [david-image]: https://img.shields.io/david/RobinHerbots/jquery.inputmask.svg
 [david-dev-url]: https://david-dm.org/RobinHerbots/jquery.inputmask#info=devDependencies
 [david-dev-image]: https://img.shields.io/david/dev/RobinHerbots/jquery.inputmask.svg
+[input-type-ref]: https://html.spec.whatwg.org/multipage/forms.html#do-not-apply

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.2.6-21",
+  "version": "3.2.6-22",
   "main": [
     "./dist/inputmask/inputmask.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.2.6-21",
+  "version": "3.2.6-22",
   "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
   "main": "./dist/jquery.inputmask.bundle.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.2.6-21",
+  "version": "3.2.6-22",
   "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 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.2.6-21
+* Version: 3.2.6-22
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "inputmask.dependencyLib", "inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("./inputmask.dependencyLib.jquery"), require("./inputmask")) : factory(window.dependencyLib || jQuery, window.Inputmask);

dist/inputmask/inputmask.dependencyLib.jquery.js

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

dist/inputmask/inputmask.extensions.js

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

dist/inputmask/inputmask.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.2.6-21
+* Version: 3.2.6-22
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "inputmask.dependencyLib" ], factory) : "object" == typeof exports ? module.exports = factory(require("./inputmask.dependencyLib.jquery")) : factory(window.dependencyLib || jQuery);
@@ -19,11 +19,11 @@
         return isSupported || (el.setAttribute(evName, "return;"), isSupported = "function" == typeof el[evName]), 
         el = null, isSupported;
     }
-    function isInputTypeSupported(inputType) {
-        var isSupported = "text" === inputType || "tel" === inputType || "password" === inputType;
+    function isElementTypeSupported(input, opts) {
+        var elementType = input.getAttribute("type"), isSupported = "INPUT" === input.tagName && -1 !== opts.supportsInputType.indexOf(elementType) || input.isContentEditable || "TEXTAREA" === input.tagName;
         if (!isSupported) {
             var el = document.createElement("input");
-            el.setAttribute("type", inputType), isSupported = "text" === el.type, el = null;
+            el.setAttribute("type", elementType), isSupported = "text" === el.type, el = null;
         }
         return isSupported;
     }
@@ -1088,7 +1088,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), EventRuler.off(el), 
-            patchValueProperty(el), ("INPUT" === el.tagName && isInputTypeSupported(el.getAttribute("type")) || el.isContentEditable || "TEXTAREA" === el.tagName) && (EventRuler.on(el, "submit", submitEvent), 
+            patchValueProperty(el), isElementTypeSupported(el, opts) && (EventRuler.on(el, "submit", submitEvent), 
             EventRuler.on(el, "reset", submitEvent), 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), 
@@ -1282,7 +1282,7 @@
             keepStatic: null,
             positionCaretOnTab: !1,
             tabThrough: !1,
-            supportsInputType: [],
+            supportsInputType: [ "text", "tel", "password" ],
             definitions: {
                 "9": {
                     validator: "[0-9]",

dist/inputmask/inputmask.numeric.extensions.js

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

dist/inputmask/inputmask.phone.extensions.js

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

dist/inputmask/inputmask.regex.extensions.js

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

dist/inputmask/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.2.6-21
+* Version: 3.2.6-22
 */
 !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 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.2.6-21
+* Version: 3.2.6-22
 */
 !function($) {
     function Inputmask(alias, options) {
@@ -17,11 +17,11 @@
         return isSupported || (el.setAttribute(evName, "return;"), isSupported = "function" == typeof el[evName]), 
         el = null, isSupported;
     }
-    function isInputTypeSupported(inputType) {
-        var isSupported = "text" === inputType || "tel" === inputType || "password" === inputType;
+    function isElementTypeSupported(input, opts) {
+        var elementType = input.getAttribute("type"), isSupported = "INPUT" === input.tagName && -1 !== opts.supportsInputType.indexOf(elementType) || input.isContentEditable || "TEXTAREA" === input.tagName;
         if (!isSupported) {
             var el = document.createElement("input");
-            el.setAttribute("type", inputType), isSupported = "text" === el.type, el = null;
+            el.setAttribute("type", elementType), isSupported = "text" === el.type, el = null;
         }
         return isSupported;
     }
@@ -1086,7 +1086,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), EventRuler.off(el), 
-            patchValueProperty(el), ("INPUT" === el.tagName && isInputTypeSupported(el.getAttribute("type")) || el.isContentEditable || "TEXTAREA" === el.tagName) && (EventRuler.on(el, "submit", submitEvent), 
+            patchValueProperty(el), isElementTypeSupported(el, opts) && (EventRuler.on(el, "submit", submitEvent), 
             EventRuler.on(el, "reset", submitEvent), 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), 
@@ -1280,7 +1280,7 @@
             keepStatic: null,
             positionCaretOnTab: !1,
             tabThrough: !1,
-            supportsInputType: [],
+            supportsInputType: [ "text", "tel", "password" ],
             definitions: {
                 "9": {
                     validator: "[0-9]",

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

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

extra/dependencyLibs/inputmask.dependencyLib.jqlite.js

@@ -208,7 +208,7 @@ Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.p
 		$.data = function(elem, name, data) {
 			return $(elem).data(name, data);
 		};
-		$.Event = function CustomEvent(event, params) {
+		$.Event = $.Event || function CustomEvent(event, params) {
 			params = params || {
 				bubbles: false,
 				cancelable: false,

js/inputmask.js

@@ -94,7 +94,7 @@
 				keepStatic: null, //try to keep the mask static while typing. Decisions to alter the mask will be posponed if possible - null see auto selection for multi masks
 				positionCaretOnTab: false, //when enabled the caret position is set after the latest valid position on TAB
 				tabThrough: false, //allows for tabbing through the different parts of the masked field
-				supportsInputType: [], //allow extra inputtypes for masking, ex. number can be allowed for numeric alias without pre-/suffix and standard radixpoint, groupSeparator
+				supportsInputType: ["text", "tel", "password"], //list with the supported input types
 				definitions: {
 					"9": {
 						validator: "[0-9]",
@@ -301,11 +301,12 @@
 			return isSupported;
 		}
 
-		function isInputTypeSupported(inputType) {
-			var isSupported = inputType === "text" || inputType === "tel" || inputType === "password";
+		function isElementTypeSupported(input, opts) {
+			var elementType = input.getAttribute("type");
+			var isSupported = (input.tagName === "INPUT" && opts.supportsInputType.indexOf(elementType) !== -1) || input.isContentEditable || input.tagName === "TEXTAREA";
 			if (!isSupported) {
 				var el = document.createElement("input");
-				el.setAttribute("type", inputType);
+				el.setAttribute("type", elementType);
 				isSupported = el.type === "text"; //apply mask only if the type is not natively supported
 				el = null;
 			}
@@ -2635,7 +2636,7 @@
 				//unbind all events - to make sure that no other mask will interfere when re-masking
 				EventRuler.off(el);
 				patchValueProperty(el);
-				if ((el.tagName === "INPUT" && isInputTypeSupported(el.getAttribute("type"))) || el.isContentEditable || el.tagName === "TEXTAREA") {
+				if (isElementTypeSupported(el, opts)) {
 					//bind events
 					EventRuler.on(el, "submit", submitEvent);
 					EventRuler.on(el, "reset", submitEvent);

package.json

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

qunit/config.js

@@ -4,9 +4,9 @@ require.config({
 		"jquery": "../node_modules/jquery/dist/jquery",
 		"jqlite": "../node_modules/jqlite/jqlite",
 		"qunit": "../node_modules/qunitjs/qunit/qunit",
-		"inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib.jquery",
+		// "inputmask.dependencyLib": "../dist/inputmask/inputmask.dependencyLib.jquery",
 		// "inputmask.dependencyLib": "../extra/dependencyLibs/inputmask.dependencyLib",
-		// "inputmask.dependencyLib": "../extra/dependencyLibs/inputmask.dependencyLib.jqlite",
+		"inputmask.dependencyLib": "../extra/dependencyLibs/inputmask.dependencyLib.jqlite",
 		// "inputmask": "../dist/inputmask/inputmask"
 		"inputmask": "../js/inputmask"
 	}

qunit/tests_dynamic.js

@@ -307,4 +307,28 @@ define([
 			done();
 		}, 0);
 	});
+	qunit.test("I{1,3}-ZZ - ivodopyanov", function(assert) {
+		var done = assert.async(),
+			$fixture = $("#qunit-fixture");
+		$fixture.append('<input type="text" id="testmask" value="VAA" />');
+		var testmask = document.getElementById("testmask");
+		Inputmask({
+			"mask": "I{1,3}-ZZ",
+			definitions: {
+				'Z': {
+					"validator": "[A-Za-z]",
+					cardinality: 1
+				},
+				'I': {
+					"validator": "[ivxlcdmIVXLCDM]",
+					cardinality: 1
+				}
+			}
+		}).mask(testmask);
+		$("#testmask").blur();
+		setTimeout(function() {
+			assert.equal(document.getElementById("testmask").inputmask._valueGet(), "V-AA", "Result " + document.getElementById("testmask").inputmask._valueGet());
+			done();
+		}, 0);
+	});
 });