屏蔽输入在桌面上工作正常，在移动设备上工作正常

Question

我正在为两个字段使用屏蔽插件。一个用于加拿大邮政编码 (T5T 5T5)，另一个用于 phone 号码 (999-999-9989)。两个面具在桌面上都可以正常工作。如果您在手机 phone 上打开相同的代码，就会出现此问题。当用户输入邮政编码一时，光标会一直跳到光标的开头。

代码如下：

HTML:

<input type="text" id="someID" /> (T9T 1A1)
<br />
<span id="result"></span>
<br /><br />
<input type="text" id="someOtherID" /> (999-999-9999)
<br />
<span id="result1"></span>

Javascript:

$("#someID").mask("a9a 9a9");
$("#someID").on('keyup', function() {
  var actualValue = $(this).val().replace(/[_-\s]/g, '').length;
  if (actualValue === 0 || actualValue !== 6) {
    $("#result").text("not valid")
  } else {
    $("#result").text("valid")
  }
});

$("#someOtherID").mask("999-999-9999");
$("#someOtherID").on('keyup', function() {
  var actualValue = $(this).val().replace(/[_-\s]/g, '').length;
  if (actualValue === 0 || actualValue !== 10) {
    $("#result1").text("not valid")
  } else {
    $("#result1").text("valid")
  }
});

我已经在这个 fiddle 上附加了 Mask 插件。

有人见过吗？

Answer 1

可能是因为您以错误的方式编写了 keyup 侦听器

这个post有答案：Jquery keyup not working on Android

更新

嗯...掩码插件本身可能是这个问题的根源...快速查看源代码揭示：

            el.on('input.mask keyup.mask', p.behaviour)
            .on('paste.mask drop.mask', function() {
                setTimeout(function() {
                    el.keydown().keyup();
                }, 100);
            })

所以我猜你可能会尝试消除移动设备的可疑代码，直到达到预期效果

Answer 2

不太可能，但请尝试在您的输入字段中设置 autoComplete="off" 属性。这可能是与移动设备 Chrome 有关的错误。

Try this.

我的直觉是基于 this issue 的，尽管报告的场景完全不同，但我相信指的是同一个错误。

引用：

Indeed the issue is caused by the auto-correction.

When a word is marked for a suggestion, the selectionStart and selectionEnd are not reflecting the caret position but they wrap the whole word, even though the caret is somewhere in between and the actual selection is collapsed.

我的假设是必须对光标进行操作才能创建遮罩视觉效果，因此很可能连接起来。

屏蔽输入在桌面上工作正常，在移动设备上工作正常

masked input working ok on desktop and working ok for some masks on mobile

html

javascript

jquery

maskedinput

更新