如何在脚本中编辑正确的电话号码

How to edit the correct phone number in my script?

本文关键字：电话号码 编辑 脚本      更新时间：2023-09-26

我有这个样本：

链接

代码网页： 

<label for="primary_phone">Primary Phone Number<span class="star">*</span></label>
<br>
<input type="text" name="primary_phone" id="primary_phone" class="_phone required-input"  value=""  maxlength="10">

代码 CSS：

.invalid{
    border:1px solid red !important;
}
.valid{
    border:1px solid green !important;
}

代码 JS：

function phoneFormat(){
    $( "._phone" ).on('blur change', function() {
        text = $(this).val().replace(/('d{3})('d{3})('d{4})/, "($1) $2-$3");
        var testt=$(this).val().match(text);
        if($(this).val()=='' || $(this).val().match(text) || $(this).val().length == 0)
        {
            $(this).removeClass('valid').addClass('invalid');
        }
        else{
            $(this).removeClass('invalid').addClass('valid');
        }
        $(this).val(text);
    });
}
 $( "#primary_phone" ).blur(function() {
        phoneFormat();
    });

我放了一个排列文本格式的脚本例如，我们可以添加这个数字：

1234567890

调用脚本出现后下一个表单(什么是正确的(

(123) 456-7890

问题是当您想编辑我的电话号码时...如果要删除最后两个数字，因为我将以下代码放在maxlength="10"

我希望用户不能写超过 10 个字符。我如何满足这两个要求。

如果有些事情解释不好，我会对这篇文章进行编辑

提前感谢！

只需在将焦点放在输入框上时删除所有特殊字符： 

  $("#primary_phone").on("click", function() {
   var thisVal = $(this).val();
    var value = thisVal.replace(/[^'/'d]/g,'');
    $(this).val(value);

});

现在，当您单击输入框外时，用于格式化数字的原始函数将播放:)

工作小提琴 ： https://jsfiddle.net/reko91/gto0qeyx/2/

我会设置一个更高的maxlength(比如15(并将input绑定到keypress。

在事件中，您可以根据一组允许的keyCode检查，否则禁止事件(字符的输入(。

如果我们已经有数字10，我也会禁止输入数字(有一个例外：如果用户选择(标记(了input的一部分并且该selection包含数字。

var alwaysAllowed = [32, 40, 41, 45]; // [" ","(",")","-"]
function keyCode(keyCode) {
    if (alwaysAllowed.indexOf(keyCode) !== -1) {
        return "allowed";
    } else if (keyCode >= 48 && keyCode <= 57) {
        // 0 - 9
        return "number";
    } else {
        // any other character
        return false;
    }
}
function countNumbers(text) {
    // return the number of characters [0-9] in the string "text"
    var counter = 0;
    for (var i = 0; i < text.length; i++) {
        if (parseInt(text[i]) >= 0 && parseInt(text[i]) < 10) {
            counter++;
        }
    }
    return counter;
}
$primaryPhone.on("keypress", function () {
    var keyCodeEvaluation = keyCode(event.keyCode);
    if (keyCodeEvaluation === false) {
        event.preventDefault();
    } else if (keyCodeEvaluation === "number") {
        var value = this.value,
            counter = countNumbers(value.substring(this.selectionStart, this.selectionEnd));
        // 
        if (counter === 0 && countNumbers(value) > 9) {
            event.preventDefault();
        }
    }
});

这将允许用户编辑(或写入(应用了您的格式的电话号码。

更重要的是

您应该重写phoneFormat()函数。

每次执行都会添加另一个事件侦听器。第一次更改input值时，它将执行一次。然后是两次，三次，依此类推。

您还应该将重复使用的对象存储在变量中，例如 $( this )(每次创建相同的jQuery object是性能杀手(。

这是一个工作示例，应该涵盖您的大多数用例。

相关文章：