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

时间:2012-10-30 23:47:24

标签: javascript jquery regex

我试图使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>

这是一个显示此行为的jsFiddle:http://jsfiddle.net/bigthyme/j6kHn/3/

4 个答案:

答案 0 :(得分:4)

keydown替换为keyup,在keydown上输入元素的值未更新

还会有条件地设置您的string,只要时间足够长:

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

这是代码:http://jsfiddle.net/j6kHn/10

btw:您还应该将.live(...)替换为.on(...),因为.live()已被弃用。

答案 1 :(得分:1)

在添加paren之前,您需要检查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();

查看this jsFiddle

中的所有内容

答案 2 :(得分:1)

使用

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

测试此代码 here

答案 3 :(得分:1)

尝试使用此代码,它应该解决您的所有问题:

演示:http://jsfiddle.net/bN6Rh/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);
    }
});​

问题是你没有检查字符的数量,所以只要输入了()-的内容,上面的代码也会添加你想要的空间。

代码当然可以更加压缩:

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