Question

我目前正在开发一个带有9位数字的网络应用程序，用短划线分隔（例如：“123-456-789”）。客户希望应用程序在用户输入时自动在正确的位置插入破折号。

然而，在某些浏览器（即Android 4.3及以下版本，iOS 6 Safari及以下版本）中，当前的实现有一些奇怪的行为 - 每当插入破折号时，光标不会移动（对用户来说，它会移动）返回一个），所以当用户键入“12345”时，该字段看起来像“123-5 | 4”。（管道代表光标）。

这是我能提出的最简单的代码示例，用于演示问题：

http://jsfiddle.net/569TP/2/（请记住，它只适用于较旧的移动浏览器）

$('#text-field').on('input', function() {
    var text = $(this).val().replace(/\-/g, '');
    var formatted = "";
    formatted += text.substring(0, Math.min(3, text.length));
    if (text.length > 3) {
        formatted += "-" + text.substring(3, Math.min(6, text.length));
    }
    if (text.length > 6) {
        formatted += "-" + text.substring(6, Math.min(9, text.length));
    }
    $(this).val(formatted);    
});

所以我真的有两个问题：

有没有办法在这些浏览器上做得更好？
有没有办法干净地检测哪些浏览器会按照我想要的方式运行，只为这些浏览器启用此功能？

实时字段修改

0 个答案: