浏览代码

add disablePredictiveText option

Robin Herbots 8 年之前
父节点
当前提交
f90daad622
共有 4 个文件被更改,包括 29 次插入5 次删除
  1. 2 0
      CHANGELOG.md
  2. 12 0
      README.md
  3. 12 1
      README_android.md
  4. 3 4
      js/inputmask.js

+ 2 - 0
CHANGELOG.md

@@ -6,11 +6,13 @@ All notable changes to this project will be documented in this file.
 - new datetime alias (WIP)
 
 ### Updates
+- rename androidHack option to disablePredictiveText. Make it available for other platforms.
 - drop Regex alias
 - drop all date/time related aliases
 - enhance inputfallback (Android)
 
 ### Fixes
+- On Android with date mask input mashing up #1708
 - Currency mask works incorrectly on Android Chrome v58 #1617
 - Can't input character at the end if it's also a placeholder on Android #1648
 

+ 12 - 0
README.md

@@ -1091,6 +1091,18 @@ You can override the Inputmask.prototype.positionColorMask`if you need some cust
            }
 ```
  
+### disablePredictiveText
+Default: false  
+Disables predictive text on mobile devices.  
+
+What it does.
+- changes the input type to password => disables predictive text
+- enables the colorMask option which creates a div, which surrounds the input.  
+So we type in the hidden password input and render the mask in the a created div.
+
+To use the colorMask, you need to include the inputmask.css you might need to add some css-tweaks to make it all visually correct in your page.
+
+ 
 ### importDataAttributes
 Specify to use the data-inputmask attributes or to ignore them.
 

+ 12 - 1
README_android.md

@@ -15,9 +15,19 @@ When browsers would implement the inputmode attribute, disabling will be possibl
 
 ##Update 18/01/2017
 
-It seems that the GBoard keyboard fires the keydown event only with 229 as keycode.  This behavior is not considered a bug as other means should be used to handle input.  (when available offcourse ;-) )
+It seems that the GBoard keyboard fires the keydown event only with 229 as keycode.  This behavior is not considered a bug as other means should be used to handle input.  
 See https://github.com/w3c/input-events
 
+##Update 10/10/2017
+
+Masking on mobile devices is currently implemented solely based on the input event.  The beforeinput event isn't common in the browsers yet and so cannot be used.
+
+I renamed the androidHack option to disablePredictiveText, so the option is now also available for other platforms.
+This can be enabled by passing true for the option.  
+
+ 
+
+<strike>
 ##The workaround, the patchwork, the bad and ugly ;-)
 
 This is not enabled by default, because I find that the developer should be aware of what it does and what you need to take into account when using this hack.
@@ -37,6 +47,7 @@ Inputmask("myfancymask", {androidHack: "rtfm"}).mask(selector);
 
 Inputmask.extendDefaults({ androidHack: "rtfm" });
 ```
+</strike>
 
 ##Reporting android related issues
 

+ 3 - 4
js/inputmask.js

@@ -18,8 +18,7 @@
     var ua = navigator.userAgent,
         mobile = isInputEventSupported("touchstart"), //not entirely correct but will currently do
         iemobile = /iemobile/i.test(ua),
-        iphone = /iphone/i.test(ua) && !iemobile,
-        android = /android/i.test(ua) && !iemobile;
+        iphone = /iphone/i.test(ua) && !iemobile;
 
     function Inputmask(alias, options, internal) {
         //allow instanciating without new
@@ -118,7 +117,7 @@
             casing: null, //mask-level casing. Options: null, "upper", "lower" or "title" or callback args => elem, test, pos, validPositions return charValue
             inputmode: "verbatim", //specify the inputmode  - already in place for when browsers will support it
             colorMask: false, //enable css styleable mask
-            androidHack: false, //see README_android.md
+            disablePredictiveText: false, //disable Predictive Text on mobile devices
             importDataAttributes: true //import data-inputmask attributes
         },
         definitions: {
@@ -3170,7 +3169,7 @@
                         el.inputmode = opts.inputmode;
                         el.setAttribute("inputmode", opts.inputmode);
                     }
-                    if (opts.androidHack === "rtfm" && android) {
+                    if (opts.disablePredictiveText === "true") {
                         if (opts.colorMask !== true) {
                             initializeColorMask(el);
                         }