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

Question

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

代码如下:

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

这不太可能，但请尝试在您的输入字段上设置 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.

我的假设是，必须操纵光标才能创建遮蔽视觉效果，所以这很可能是相关联的。