Question

我一直试图将电话号码掩盖为特定区域的格式。

$("input:text[name=phone_number]").keyup(function() {
    var number = $(this).val().replace(/[^\d]/g, '');

        number = number.replace(/(\d{3})(\d{3})(\d{3})/, "($1) $2-$3");

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

我在上面的脚本中遇到的问题是正则表达式在替换输入字段中的值之前正在等待3个数字。

此外，我必须按Enter键才能进行效果。

有没有办法让(\d{3})更具活力。例如，即使我只输入了1位数字，它仍应显示(0 )。

然后我继续输入(05 ) ...等等......格式如下(051) 000-000？

我不想使用额外的插件。我知道那里有很多。

Answer 1

我做了一个简单的面具，检查：

＆＃13;

$("input[name=phone_number]").keydown(function(e) {
    var actualValue = e.key;
    var baseMask = '(###) ###-###';
    var valueInput = this.value.match(/\d/g);
    if (actualValue !== 'Backspace' && /[^\d]/.test(actualValue)) {
        return false;
    }
    if (actualValue === 'Backspace') {
        if (!valueInput) {
            return false;
        }
        valueInput.pop();
        actualValue = '#';
    }
    var numsValues = valueInput ? valueInput.concat(actualValue) : [actualValue];
    $.each(numsValues, function() {
        baseMask = baseMask.replace(/\#/, this);
    });
    $(this).val(baseMask);
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="phone_number">

＆＃13;

Answer 2

＆＃13;

$("#input").keyup(function() {
    var number = $(this).val().replace(/[^\d]/g, "");

    number = number.replace(/(\d{3})(\d{0,3})(\d{0,3})/, function(match, p1, p2, p3) {
        if (p2.length < 1)
            return "(" + p1 + ") ";
        else if (p3.length < 1)
            return "(" + p1 + ") " + p2;
        return "(" + p1 + ") " + p2 + "-" + p3;
    });

    $(this).val(number);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id=input placeholder="type your number">

＆＃13;

jQuery电话号码屏蔽与正则表达式无法正常工作

2 个答案: