Javascript 实时字段修改

我目前正在开发一个web应用程序，其文本字段有9位数字，用破折号分隔（例如：“123-456-789”）。客户端希望应用程序在用户键入时自动在正确的位置插入破折号

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

下面是我能想到的最简单的代码示例，它演示了这个问题：

（请记住，它只在较旧的移动浏览器上存在问题）

所以我有两个问题：

• 有没有一种方法可以在这些浏览器上运行得更好
• 有没有一种方法可以清晰地检测哪些浏览器会按照我想要的方式运行，并且只为那些浏览器启用此功能

---

您的客户在插入9位数字后加上破折号是否足够好？我认为它可以解决那些不兼容的问题。当我第一次遇到这个问题时，我让它只在模糊上插入破折号。我最终认为它遗漏了很多东西，所以我通过（gasp）用户代理嗅探重新启用了自动插入功能，在Android浏览器和iOS Safari上禁用了它，我更喜欢这一点，但我想1。不使用用户代理嗅探，更准确地检测哪些浏览器支持该功能和2。支持iOS 7 Safari 7，它确实表现正常。哎呀，开始漫无边际，并没有真正回答您的问题。我想说的是，不，我和客户都非常喜欢自动插入破折号，所以禁用它不是一个更好的选择。

$('#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);    
});