javascript - 移动网站表单中的输入屏蔽文本框不起作用

Question

我有一个要求，需要将输入屏蔽应用于移动网站中使用的表单中的文本框。

例如:我的移动网站中使用了以下表单，其中电话号码#需要根据标签中给出的示例文本进行屏蔽。我尝试使用一些 jquery 插件来使其工作，但我发现它在网络中完美工作，但无法在移动浏览器中运行。

我在网上看到一条评论说移动浏览器不依赖按键和按键事件。这是真的吗？

我尝试使用自己的代码来实现解决方案(代码如下)

    function formatPhone(e, node) {
    var keycode =  e.keyCode ? e.keyCode : e.which;
    if(keycode == 8){ // backspace
        return false;
    }
    if(keycode == 46){ // delete
        return false;
    } 
    var input = $(node).val();
    input = input.replace(/-/g, '');
    var areaCode = input.substring(0, 3);
    var exchange = input.substring(3, 6);
    var tail = input.substring(6);          
    $(node).val(areaCode + "-" + exchange + "-" + tail);                            

}
 $('#${PRE_ID}Phone').keyup(function (e) { formatPhone(e, this); });

上面的代码在网络浏览器中可以工作，但是当涉及到移动设备时，前 3 位数字可以正常工作，但第 4 和第 5 位数字交换以及数字序列总是失败。而且当您删除“否”时，并非所有数字都会被删除。

我们有任何 jquery 插件或任何代码片段可以完成这项工作吗？

下面是我在 S2、S3、iPhone 的移动默认浏览器中尝试过的一些插件(但失败了)

面具| jQuery 插件注册表 http://andr-04.github.io/inputmask-multi/en.html http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmaskedinput/index.htm http://mavrin.github.io/maskInput/

提前谢谢

Answer 1

即使在移动设备上，这也适用于我:

$("#phoneInput").jqxMaskedInput({ 宽度: 250, 高度: 25, 掩码: '-###-###-####'});

我已将其与 iPhone 和 Nexus 一起使用。