Question

我想在<input id="phone_number" type="tel">上格式化keypress

我的输入字段的要求是：

仅数字，没有字母和其他特殊字符
使用(123) 457-7890之类的美国数字设置输入字段的格式

这是我当前的代码：

jQuery("#phone_number").on("keypress", function(event) {
    var reg = /[0-9]/g;
    var key = String.fromCharCode(event.keyCode);
    if(!reg.test(key)){
        // return false if NOT number
        return false;
    } else {
        // numbers only
        var phone_value = jQuery("#phone_number").val();
        var number = phone_value.replace(/(\d{3})(\d{3})(\d{2})/,"$1-$2-$3");
        jQuery("#phone_number").val(number);
    }
});

问题：我的代码存在问题，因为它无法限制我输入的length

Final Output应该看起来像(123) 457-7890括在括号中的前3位数字

任何帮助将不胜感激。谢谢

Answer 1

我想这应该给您所需的东西。您非常接近答案。

我使用<input>属性限制了maxlength的长度，并在phone_value.replace()周围的$1函数中添加了括号。

jQuery("#phone_number").on("keypress", function(event) {
    var reg = /[0-9]/g;
    var key = String.fromCharCode(event.keyCode);
    if(!reg.test(key)){
        // return false if NOT number
        return false;
    } else {
        // numbers only
        var phone_value = jQuery("#phone_number").val();
        var number = phone_value.replace(/(\d{3})(\d{3})(\d{2})/,"($1) $2-$3");
        jQuery("#phone_number").val(number);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="phone_number" type="tel" maxlength="14">

如何在jQuery中不使用插件的情况下格式化输入的电话号码？

1 个答案: