Javascript 我的美国数字格式代码中的有趣行为

我试图让10位数字看起来像美国电话号码（即（########-#）。我的代码确实完成了第一个目标，但它也完成了一些我不太清楚的事情。键入数字时，字符“（）”会在键入任何其他数字之前显示。我希望先出现开括号，然后在输入第三位数字后出现结束语。请不要给我一个新的解决方案；试着指出我正在描述的问题

<script type="text/javascript">
  $('.drumbi-caller-number').live('keydown', function (event) {
    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) {
    } else {
        inputval = $(this).val();
        var string = inputval.replace(/[^0-9]/g, "");
        var first3 = string.substring(0,3);
        var next3 = string.substring(3,6);
        var next4 = string.substring(6,9);  
        var string = ("(" + first3 + ")" + next3 + "-" + next4);
        $(this).val(string);
    }
});
</script>

$（'.drumbi调用者号码'）.live（'keydown'，函数（事件）{
如果（event.keyCode==8 | | event.keyCode==37 | | event.keyCode==39）{
}否则{
inputval=$（this.val（）；
var string=inputval.replace（/[^0-9]/g，“”）；
var first3=string.substring（0,3）；
var next3=string.substring（3,6）；
var next4=string.substring（6,9）；
变量字符串=（“（“+first3+”）”+next3+“-”+next4）；
$（this）.val（字符串）；
}
});

---

下面是一个显示此行为的JSFIDLE:

在附加参数之前，需要检查

first3

的长度：

var string = ("(" + first3 + ((first3.length>=3)?")":"") + next3 + "-" + next4);

尽管不是在你的问题中，你可以对连字符做同样的处理：

var string = ("(" + first3 + 
     // only append the ) if the you have 3+ chars
     ((first3.length>=3)?")":"") + 
     next3 + 
     // only append the - if the you have 6+ chars
     (((first3+next3).length>=6)?"-":"") + 
     next4);

您还应该使用

.on（）

而不是

live（）

---

查看它在

中将键控替换为键控，在键控上，输入元素的值不会更新

也可以有条件地设置

字符串

，前提是长度足够：

var string = string.length > 2 ? ("(" + first3 + ")" + next3 + "-" + next4) : first3;

代码如下：

顺便说一句：您还应该将

.live（…）

替换为

。在（…）

上，因为

.live（）

已被弃用。

使用

$('.foo').on('keyup', function (event) {
  $(this).val($(this).val().replace(/\D/g, "").replace(/(\d{0,3})(\d{0,3})(\d{0,4}).*/, "($1) $2-$3"));
});

---

测试此代码

尝试使用此代码，它将修复您的所有问题：

演示：

jQuery：

$('.foo').on('keyup', function(event) {
    if (event.keyCode == (8 || 37 || 39)) { }
    else {
        inputval = $(this).val();
        var string = inputval.replace(/[^0-9]/g, "");
        var first3 = string.substring(0, 3);
        var next3 = " " + string.substring(3, 6);
        var next4 = string.substring(6, 10);
        if (string.length < 3) { // Less than 3
            var string = "(" + first3;
        }
        else if (string.length > 2 && string.length < 7) { // More than 2 and less than 7
            var string = "(" + first3 + ")" + next3;
        }
        else { // Anything else
            var string = "(" + first3 + ")" + next3 + "-" + next4;
        }
        $(this).val(string);
    }
});​

---

或者更好的方法是，对实际文本框使用onchange事件，而不是观察按键。您不希望在（'change'）上显示

，否则它只会在失去焦点时更新。只需重新读取OP，忽略了len<3不应显示括号的部分。。注意
$（this）.val（）
可以是简单的
这个值
。发生这种情况只是因为你没有检查任何长度，而else正在为每个按键运行。请参阅我下面的答案，它应该满足你的所有需要。此解决方案非常有效！我不知道为什么以前没有想到这个问题。干杯@大百里香很高兴听到，如果您将其标记为答案，将不胜感激，谢谢！这太棒了！尽管我相信@doublesharp的解决方案在移动设备（尤其是Android）上效果更好。谢谢你的帮助，巴德。实际上我们的解决方案非常相似，只是我的解决方案使用了稍微不紧凑的if语句，它们是字符串长度，而不是特定的数字长度。如果您只键入3个字符，这一点的好处就显而易见了。我的解决方案会插入
）
，而doublesharp要求您输入第四个字符，甚至跳过空格。
$('.foo').on('keyup', function(e) {
    if (e.keyCode == (8 || 37 || 39));
    else {
        var str = this.value.replace(/[^0-9]/g, "");

        var f3 = str.substring(0, 3),
            n3 = " " + str.substring(3, 6),
            n4 = str.substring(6, 10);

        if (str.length<3) str = "(" + f3;
        else if (str.length>2&&str.length<7) str="("+f3+")"+n3;
        else str="("+f3+")"+n3+"-"+n4;

        this.value = str;
    }
});​