javascript - jQuery 电话号码屏蔽与正则表达式不起作用

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}) 更加动态。例如，即使我只输入了一位数字，它仍应显示 (0 )。

然后我继续输入 (05 )...... p>

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

Answer 1

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

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

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