在安卓手机上，掩码输入无法正常工作？

Question

我正在使用digitalbush masked input jQuery插件。它在网页浏览器和iPhone浏览器中完美运行，但在Android移动设备上无法正常工作。

我的问题是：掩码在输入栏中为_ - _ - ___。

当我输入数字时，它将变成12345685555___--

示例：http://rossbender.com/temp/mask.html

有什么建议吗？我该如何解决这个问题？

谢谢 Prasad。

- Durga Prasad

---

你能分享一下你使用的DOM吗？ - Milind Anantwar

$('input[name="user[ssn]"]').mask("999-99-9999"); 但是所有的掩码都返回相同的行为。 - Durga Prasad

你的意思是你使用了哪个HTML？ - Milind Anantwar

Ruby on Rails（HTML视图页面） - Durga Prasad

这个问题在11个月前就已经被解决了，但由于某些原因，网站发布的版本没有更新。如果你从原始代码中获取，修复将会生效：https://raw.github.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js - Jonathan Rowny

Answer 1

我采取了三个措施来解决这个问题，并使所有 Android 4.0+ 手机都得到了修复：

1. 将 masked-input 更新至至少版本 1.4
2. 为输入框添加 type="tel"，以触发数字键盘
3. 删除输入框的 maxlength 属性，或者将其设置为一定不会干扰插入符操作的值，例如 20。

- Tony Brasunas

---

在我的 Android 4.x 设备上运行良好。 - Pedro Affonso

在我的5.1.1版本上运行良好，使用angular-payments在angular表单上使用输入掩码。谢谢！ - Rob R

这对我有用。三星键盘存在预测文本问题，通过强制使用数字键盘解决了该问题。 - AntonK

通过添加type="tel"解决了...谢谢!!! - Colonel Software

谢谢朋友，你救了我！它完美地运行了！ - Gregory

Answer 2

我尝试使用Jonathan Rowny提到的原始脚本，但在S3 - Chrome浏览器上仍然遇到同样的问题。我认为这与输入类型type =“tel”和/或type =“number”有关。最终我不得不使用另一个插件。http://igorescobar.github.io/jQuery-Mask-Plugin/ jquery-mask（请勿与jquery-masked-input混淆）非常相似，但语法略有不同。希望这可以帮助其他人解决这个问题。

jquery-masked-input语法： $("#phone").mask("[phone]"); VS

jquery-mask语法：('＃phone').mask('[phone]');

- duyn9uyen

---

Jonathan Rowny提到的原始脚本在我的Android 4.1+ Chrome上也无法工作。我尝试了Igor Escobar的脚本（jquery-mask），它完美地解决了问题！ - user256604

Igor Escobar的脚本在较老版本的Android原生浏览器上无法正常工作。 - Pedro Affonso

Answer 3

在尝试了不同的掩码库（Inputmask、ui-mask、ngMask）之后，我最终选择使用jQuery-Mask-Plugin https://igorescobar.github.io/jQuery-Mask-Plugin/，它表现出色，而且轻量级、文档完善，并且有angularjs、react等示例。

- Rathma

Answer 4

这个问题已经在一段时间之前被修复了，但因为某些原因网站上发布的版本没有包含这些更改。如果你从原始源代码中获取，修复就会生效：https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js

- Jonathan Rowny

---

我已经使用了上述的 .Js 文件，但问题仍未解决。我正在使用 Android Jelly Bean 操作系统和 Chrome/Firefox 浏览器。 - user2788596

@user2788596 可能是因为您浏览器的缓存问题。无论如何，今天它可以正常工作，并且您可以在此处获取1.4.1版本：https://github.com/digitalBush/jquery.maskedinput/tree/master/dist - Laurent.B

Answer 5

为了进一步增强Tony Brasunas的答案，可以在jquery.maskedinput.js中添加以下代码片段来实现第3点的动态增加maxlength，以便不会干扰插入符操作。 < p > < em > 删除输入的maxlength属性或将其设置为某个值，以确保不会干扰插入符操作，例如20。

    defs = $.mask.definitions;
    tests = [];
    partialPosition = len = mask.length;
    firstNonMaskPos = null;

    //insert snippet below
    if (chrome && android) {
        console.log("chrome && android");
        var allAllowedRegExps = '';
        jQuery.each(defs, function (key, value) {
            allAllowedRegExps = allAllowedRegExps + key;
        });
        allAllowedRegExps = allAllowedRegExps.replace(/\[/g, '');
        allAllowedRegExps = allAllowedRegExps.replace(/\]/g, '');
        allAllowedRegExps = '[^' + allAllowedRegExps + ']';
        var re = new RegExp(allAllowedRegExps, "g");
        var actual = mask;
        var replacedVal = actual.replace(re, "");
        var actualValue = actual.length - replacedVal.length;
        if ($(this).attr('maxlength') !== undefined) {
            $(this).attr('maxlength', parseInt(this.attr('maxlength')) + parseInt(actualValue));
        }
   }

    mask = String(mask);

- Arham Ranjha

Answer 6

我刚遇到这个问题，通过从 asp 文本框中删除属性 type="number" 来解决它。之后，掩码输入甚至在移动设备上也能正常工作。

- Lukas

Answer 7

该问题中使用的库已不再维护。我将我的应用程序切换到jQuery Mask Input，因为它运行良好，具有非常相似的基本初始化调用，使得转换非常容易，并且在发布此帖子时，jQuery Mask Input 在 GitHub 上定期维护。

我的问题是电话号码掩码器在输入3或4个数字时将光标移回第二个位置。此后，光标继续表现异常。在 Android 平板电脑上使用 Chrome 的主要版本 51 后，使用 jQuery Masked Input v1.4.1（旧库）时发现了这个问题。

- plaidcorp

Answer 8

我用1.4.1版本，并将最大长度设置为掩码中字符数加一，这对我有效。掩码限制了实际输入，而最大长度+1修复了无法在字段中输入数字的问题。

- George Beier

Answer 9

这可能是一个快速解决方案：

var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);

// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
    $('.price_input').attr('type','tel');
}     

- Himanshu Saini