Question

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

我需要解决的问题是每次按下任何将输入发送到文本字段的键（任何<input type="text" class="phone_val"...）时，插入符都会移到最后，导致代码替换它。

代码的目的是格式化数据库中使用的数字。允许的模式是：

          235 - 5555
    (321) 234 - 5555
  1 (321) 234 - 5555
 21 (321) 234 - 5555
012 (321) 234 - 5555

这些是我们在客户群中使用的电话号码类型。我需要能够应用这些模式，而不必在每次按下键时将插入符号（文本光标位置）移动到末尾。在该人需要纠正场中间的某些角色之前，这不是问题。我不介意能够使用正则表达式严格简化和缩小代码。

HTML：

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

Javascript（jQuery假设）：

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

Answer 1

这在很多层面都很糟糕。对于用户来说，这里有两件坏事：首先，在输入时改变输入是令人困惑和烦人的;其次，每次键入一个角色时将插入符号移到最后只是令人生气。虽然可以编写代码来移动插入符号，但我建议不要使用它，而是建议在change或blur事件中进行验证，或等待几秒钟的键盘时间您在评论中建议的不活动。

Answer 2

这是我到目前为止所得到的：

$('.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位数字，但我不知道如何处理它们之间的数字。我应该格式化那些，以便用户可以轻松地看到他们的错误吗？或者我应该让他们独自一人？

修改字段时插入位置的问题（HTML + JS）

2 个答案: