add inputmode option

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
 - improve inputfallback (Android support)
 
 ### Fixed
+- ios 8, safari, on first visit unable to enter any characters #826
 - Numerica mask not run in Galaxy S5 + Chrome + Android #1357
 
 ## [3.3.3 - 2016-09-09] - hotfix

README.md

@@ -992,6 +992,11 @@ Apply casing at the mask-level.
 Options: null, "upper", "lower" or "title"
 Default: null
 
+### inputmode
+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
+
 ## 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

js/inputmask.extensions.js

@@ -45,7 +45,8 @@
 			},
 			mask: "(\\http://)|(\\http\\s://)|(ftp://)|(ftp\\s://)i{+}",
 			insertMode: false,
-			autoUnmask: false
+			autoUnmask: false,
+			inputmode: "url",
 		},
 		"ip": { //ip-address mask
 			mask: "i[i[i]].i[i[i]].i[i[i]].i[i[i]]",
@@ -65,7 +66,8 @@
 			},
 			onUnMask: function (maskedValue, unmaskedValue, opts) {
 				return maskedValue;
-			}
+			},
+			inputmode: "numeric",
 		},
 		"email": {
 			//https://en.wikipedia.org/wiki/Domain_name#Domain_name_space
@@ -91,7 +93,8 @@
 			},
 			onUnMask: function (maskedValue, unmaskedValue, opts) {
 				return maskedValue;
-			}
+			},
+			inputmode: "email",
 		},
 		"mac": {
 			mask: "##:##:##:##:##:##"

js/inputmask.js

@@ -120,7 +120,8 @@
 			inputEventOnly: false, //dev option - testing inputfallback behavior
 			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"
+			casing: null, //mask-level casing. Options: null, "upper", "lower" or "title"
+			inputmode: "verbatim" //specify the inputmode  - already in place for when browsers support them
 		},
 		masksCache: {},
 		mask: function (elems) {
@@ -1988,6 +1989,7 @@
 			on: function (input, eventName, eventHandler) {
 				var ev = function (e) {
 					// console.log("triggered " + e.type);
+
 					if (this.inputmask === undefined && this.nodeName !== "FORM") { //happens when cloning an object with jquery.clone
 						var imOpts = $.data(this, "_inputmask_opts");
 						if (imOpts)(new Inputmask(imOpts)).mask(this);
@@ -2001,7 +2003,6 @@
 									skipInputEvent = false;
 									return e.preventDefault();
 								}
-								// if (composition) return e.preventDefault();
 								break;
 							case "keydown":
 								//Safari 5.1.x - modal dialog fires keypress twice workaround
@@ -2023,12 +2024,18 @@
 									return false;
 								}
 								break;
-							case "compositionstart":
-								composition = true;
-								break;
-							case "compositionend":
-								composition = 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);
@@ -2722,8 +2729,8 @@
 			}
 
 			if (mobile) {
-				el.setAttribute("inputmode", "verbatim");
-				el.setAttribute("x-inputmode", "verbatim");
+				el.setAttribute("inputmode", opts.inputmode);
+				el.setAttribute("x-inputmode", opts.inputmode);
 			}
 
 			//unbind all events - to make sure that no other mask will interfere when re-masking
@@ -2752,7 +2759,9 @@
 					EventRuler.on(el, "keypress", keypressEvent);
 				}
 				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);

js/inputmask.numeric.extensions.js

@@ -144,6 +144,7 @@
 			insertMode: true,
 			autoUnmask: false,
 			unmaskAsNumber: false,
+			inputmode: "numeric",
 			postFormat: function (buffer, pos, opts) { //this needs to be removed // this is crap
 				// console.log(buffer);
 				if (opts.numericInput === true) {

js/inputmask.phone.extensions.js

@@ -47,7 +47,8 @@
 			onUnMask: function (maskedValue, unmaskedValue, opts) {
 				//implement me
 				return unmaskedValue;
-			}
+			},
+			inputmode: "tel",
 		}
 	});
 	return Inputmask;