如何在键入时使用 jQuery 格式化美国/加拿大电话号码？

Question

我有一个需要格式化的 HTML 表单中的电话字段

(555) 555-5555

这是字段：

<input type="tel" id="phone" name="phone" placeholder="(555) 555-5555" autocomplete="off" maxlength="14" required="required">

几个要求：

1. 它应该会在您键入时自动格式化。
2. 粘贴后应该会自动格式化。
3. 它应该只允许输入数字、(、)、- 和空格。
4. 如果用户键入作为掩码一部分的非数字字符之一，只要这些字符位于正确的位置，它就应该允许这些字符出现在字段中。不要剥去它们。例如，如果他们在字段中键入的第一个字符是一个左括号，它应该允许它。如果它是一个数字，它应该将其更新为一个开括号，后跟该数字。如果是其他字符，则应将其删除。

如何使用 jQuery/Javascript 将这种即用型掩码应用于这些要求？

Answer 1

我将其他相关问题的答案以及我自己的代码拼凑在一起，并提出了这个似乎运作良好的解决方案：

// Phone formatting: (555) 555-5555
$("#phone").on("keyup paste", function() {
    // Remove invalid chars from the input
    var input = this.value.replace(/[^0-9\(\)\s\-]/g, "");
    var inputlen = input.length;
    // Get just the numbers in the input
    var numbers = this.value.replace(/\D/g,'');
    var numberslen = numbers.length;
    // Value to store the masked input
    var newval = "";

    // Loop through the existing numbers and apply the mask
    for(var i=0;i<numberslen;i++){
        if(i==0) newval="("+numbers[i];
        else if(i==3) newval+=") "+numbers[i];
        else if(i==6) newval+="-"+numbers[i];
        else newval+=numbers[i];
    }

    // Re-add the non-digit characters to the end of the input that the user entered and that match the mask.
    if(inputlen>=1&&numberslen==0&&input[0]=="(") newval="(";
    else if(inputlen>=6&&numberslen==3&&input[4]==")"&&input[5]==" ") newval+=") ";
    else if(inputlen>=5&&numberslen==3&&input[4]==")") newval+=")";
    else if(inputlen>=6&&numberslen==3&&input[5]==" ") newval+=" ";
    else if(inputlen>=10&&numberslen==6&&input[9]=="-") newval+="-";

    $(this).val(newval.substring(0,14));
});

Answer 2

我非常喜欢 Nick Petrie 的回答，但我认为在输入位置 3 的数字时应该添加右括号“)”，而不是位置 4 的数字（就像现在这样）。

这是修改后的版本：

// Phone formatting: (555) 555-5555
$("#Phone").on("keyup paste", function(event) {

    // Don't run for backspace key entry, otherwise it bugs out
    if(event.which != 8){

        // Remove invalid chars from the input
        var input = this.value.replace(/[^0-9\(\)\s\-]/g, "");
        var inputlen = input.length;
        // Get just the numbers in the input
        var numbers = this.value.replace(/\D/g,'');
        var numberslen = numbers.length;
        // Value to store the masked input
        var newval = "";

        // Loop through the existing numbers and apply the mask
        for(var i=0;i<numberslen;i++){
            if(i==0) newval="("+numbers[i];
            else if(i==2) newval+=numbers[i]+") ";
            else if(i==6) newval+="-"+numbers[i];
            else newval+=numbers[i];
        }

        // Re-add the non-digit characters to the end of the input that the user entered and that match the mask.
        if(inputlen>=1&&numberslen==0&&input[0]=="(") newval="(";
        else if(inputlen>=6&&numberslen==3&&input[4]==")"&&input[5]==" ") newval+=") ";
        else if(inputlen>=5&&numberslen==3&&input[4]==")") newval+=" ";
        else if(inputlen>=6&&numberslen==3&&input[5]==" ") newval+=" ";
        else if(inputlen>=10&&numberslen==6&&input[9]=="-") newval+="-";

        $(this).val(newval.substring(0,14));

    }
});

我已将 else if(i==3) newval+=numbers[i]+") "; 更改为 else if(i==2) newval+=numbers[i]+") "; 并添加了 if(event.which != 8){} 语句来捕获退格键输入（否则会卡住）。

Answer 3

你也可以使用这个小方法：

$("#phone").keydown(function(e) {
    var curchr = this.value.length;
    var curval = $(this).val();
    if (curchr == 3) {
        if( e.keyCode!=8 ){
            $(this).val("(" + curval + ")" + " ");
        }
    } else if (curchr == 9) {
        if( e.keyCode!=8 ){
            $(this).val(curval + "-");
        }
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105) && e.keyCode !=8 ) {
        e.preventDefault();
    }
});