javascript - 如何在键入时使用 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));
});