如何在javascript中格式化电话号码

omhiaaxx 于 2023-01-07 发布在 Java

关注(0)|答案(2)|浏览(161)

我用HTML创建了一个表单字段，并希望自动格式化电话号码输入，使其看起来像（123）456-7890。
我的HTML代码看起来像这样：

<form>
<div class="sc-formfield-input">
     <div class="input-group">
      <input type="text" id="Phone" name="Phone" data-field-type="Phone"  placeholder="Phone" ><i class="fa-solid fa-phone"></i></div>
</div>
</form>

如何编写JavaScript来按照我想要的方式格式化电话号码？

JavaScript

来源：https://stackoverflow.com/questions/75033269/how-to-format-phone-number-in-javascript

2条答案

按热度按时间

o7jaxewo1#

使用this answer的函数，可以通过在script标记中附加以下代码来实现所需的功能：

document.getElementById('Phone').addEventListener('focusout', function() {
    event.target.value = formatPhoneNumber(event.target.value);
});

您还可以使用change事件，而不是IT goldman建议的focusout。

赞(0）回复(0）举报 2023-01-07

xxe27gdn2#

您可以使用下面的代码作为参考，并改变数值，只要输入数字.

function RecordChange() {
    let number = document.getElementById("phone_number_field").value;
    //console.log(number);
    if(number.length > 10) {
        document.getElementById("Show_Warning").innerHTML = "invalid phone number"
        document.getElementById("phone_number_field").style.borderColor = 'red';
    }
    else {
        document.getElementById("Show_Warning").innerHTML = ""
        document.getElementById("phone_number_field").style.borderColor = 'black';
    }
    if(
        number.length === 10
    ) {
        let targetvalue = "(" + number.slice(0, 3) + ")-" + number.slice(3, 7) + "-" + number.slice(7, 10)
        console.log(targetvalue);
        document.getElementById("phone_number_field").value = targetvalue;
    }
    
}

<html>
    <title>Header</title>
    <body>
        <script src="script.js"></script>
        Body Starts : 
        <div>
            <p>Phone Number : </p>
            <input type="text" id="phone_number_field" oninput="RecordChange()">
            <p id = "Show_Warning"></p>
        </div>
    </body>
</html>

这只是一个伪代码，但函数，您可以用来改变数字格式的需要。

赞(0）回复(0）举报 2023-01-07

我来回答

如何在javascript中格式化电话号码

2条答案

相关问题

热门标签

最新问答