Javascript 修改字段（HTML+；JS）时插入符号位置出现问题

最初的开发人员编写了以下JavaScript，这在我看来有点业余，但我在Javscript中工作不多，因此我无法提供更好的解决方案

我确实需要解决的问题是，每次按下向文本字段发送输入的任何键（any

Javascript（假设jQuery）：

$（文档）.ready（函数（）{
$（'phone_val'）.attr（'maxlength'，20）；
$（'.phone_val'）.keyup（函数（）{
var startVal，finVal，i；
startVal=$（this.val（）.replace（/\D/g'）；
如果（起始长度7&&起始长度<11）{
finVal=“（”；
对于（i=0；i=11）{
finVal=“”；
停止=起始长度<13？起始长度-11:2；
对于（i=0；i

这在很多层面上都很糟糕。对于用户来说，这里有两件不好的事情：第一，在键入时更改输入是令人困惑和恼火的，第二，每次键入字符时都将插入符号移到末尾是令人恼火的。虽然可以编写代码来移动插入符号，但我建议不要这样做，而是建议这样做在

更改

或

模糊

事件中进行验证，或者按照您在评论中的建议，等待几秒钟键盘不活动。

以下是我目前得到的信息：

$('.phone_val').blur(function () {
    var inpVal = $(this).val().replace(/\D/g, ''); //get rid of everything but numbers

    // RegEx for:
    //    xxx (xxx) xxx - xxxx
    //     xx (xxx) xxx - xxxx
    //      x (xxx) xxx - xxxx
    //        (xxx) xxx - xxxx
    inpVal = inpVal.replace(/^(\d{0,3})(\d{3})(\d{3})(\d{4})$/, '$1($2) $3 - $4');

    // RegEx for (needs a separate one because of the parentheses):
    //              xxx - xxxx
    inpVal = inpVal.replace(/^(\d{3})(\d{4})$/, '$1 - $2');

    $(this).val(inpVal);
});

---

这需要处理7位数字和10-13位数字，但我不确定如何处理介于两者之间的数字。我是否也要格式化这些数字，以便用户能够轻松地看到他们的错误？还是应该让他们自己处理？

我正在考虑让代码在用户停止键入后等待几秒钟，然后再应用格式化。这是我的建议想法正是如此。我反对设置电话号码和电子邮件地址的格式，但老板声称这对技术人员的管理很重要。因此，我喜欢等待一段时间或使用onBlur的想法，但我在使用正则表达式时遇到了困难——首先我必须删除所有字母，然后我必须替换不同的数字不同格式的字母。删除除数字以外的所有内容都很容易…

startVal.replace（/\D/g，”）

。但是现在我应该嵌套.replace（）调用吗？还是有一个正则表达式可以处理所有这些？

<input type="text" class="phone_val" style="width: 85%; text-align: right;"
       value="<%= CustomerFields("billing_phone") %>" id="billing_phone"
       name="billing_phone" tabindex="10" />

$(document).ready(function() {
    $('.phone_val').attr('maxlength', 20);
    $('.phone_val').keyup(function(){
        var startVal, finVal, i;
        startVal = $(this).val().replace(/\D/g,'');
        if (startVal.length <= 7) {
            finVal = "";
            for (i = 0; i < startVal.length; i += 1) {
                if (i === 3) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }
        else if (startVal.length > 7 && startVal.length < 11) {
            finVal = "(";
            for (i = 0; i < startVal.length; i += 1) {
                if (i === 3) {
                    finVal += ") " + startVal.charAt(i);
                }
                else if (i === 6) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }
        else if (startVal.length >= 11) {
            finVal = "";
            stopP = startVal.length < 13 ? startVal.length - 11 : 2;
            for (i = 0; i < startVal.length; i += 1) {
                if (i === stopP) {
                    finVal += startVal.charAt(i) + " (";
                }
                else if (i === (stopP + 4)) {
                    finVal += ") " + startVal.charAt(i);
                }
                else if (i === (stopP + 7)) {
                    finVal += " - " + startVal.charAt(i);
                }
                else {
                    finVal += startVal.charAt(i);
                }
            }
        }

        if (startVal.length < 4) {
            finVal = finVal.replace(/\D/g,'');
        }
        $(this).val(finVal);
    });
});

$('.phone_val').blur(function () {
    var inpVal = $(this).val().replace(/\D/g, ''); //get rid of everything but numbers

    // RegEx for:
    //    xxx (xxx) xxx - xxxx
    //     xx (xxx) xxx - xxxx
    //      x (xxx) xxx - xxxx
    //        (xxx) xxx - xxxx
    inpVal = inpVal.replace(/^(\d{0,3})(\d{3})(\d{3})(\d{4})$/, '$1($2) $3 - $4');

    // RegEx for (needs a separate one because of the parentheses):
    //              xxx - xxxx
    inpVal = inpVal.replace(/^(\d{3})(\d{4})$/, '$1 - $2');

    $(this).val(inpVal);
});