首页 文章

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

提问于
浏览 次
5

我正在为两个字段使用蒙面插件 . 一个是加拿大邮政编码（T5T 5T5），另一个是电话号码（999-999-9989） . 两个面具在桌面上都能正常工作如果您在手机上打开相同的代码，则会出现此问题 . 当用户键入邮政编码1时，光标会一直跳到光标的开头 .

这是代码：

HTML：

<input type="text" id="someID" /> (T9T 1A1)


<span id="result"></span>



<input type="text" id="someOtherID" /> (999-999-9999)


<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插件 .

谁见过这个？

javascript jquery html5 maskedinput

2 回答

  • 0

    这是一个远景，但尝试在输入字段上设置 autoComplete="off" 属性 . 这可能是与Chrome移动版相关的错误 .

    Try this.

    我的预感基于this issue，虽然报告的情况完全不同，但我认为是指同一个错误 .

    引用：

    事实上，这个问题是由自动修正引起的 . 当一个单词被标记为建议时，selectionStart和selectionEnd不会反映插入符号位置，但它们会包裹整个单词，即使插入符号介于两者之间并且实际选择被折叠 .

    我的假设是必须操纵光标以创建掩蔽视觉效果，因此可以很好地连接 .

    回复于
  • 6

    可能是因为你正在以错误的方式编写 keyup 监听器

    这篇文章的答案是：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);
            })

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

    回复于

相关问题