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

【问题标题】：How to format phone number in javascript如何在javascript中格式化电话号码
【发布时间】：2023-01-07 05:07:59
【问题描述】：

我在 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 来按照我的需要格式化电话号码？

【问题讨论】：

这回答了你的问题了吗？ Regular Expression to reformat a US phone number in Javascript
我看到 JavaScript 示例无法解决这个问题，但是我应该在 html 的什么地方添加 JavaScript？我创建了一个 <script></script> 并将 JS 插入其中，但是如何让该脚本连接到我的 html 中的电话输入字段？
您可能希望它发生在 input 的 change 事件上。您可以添加 js 功能以确保完整性吗？然后你可以使用addEventListener挂钩它

标签： javascript html format phone-number

【解决方案1】：

使用 this answer 的功能，您可以通过将其附加到 script 标签中来实现您想要的：

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

您还可以使用 change 事件而不是 focusout 作为 IT高盛建议道。

【讨论】：

【解决方案2】：

您可以使用以下代码作为参考，并在输入数字后立即更改值。

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>

这只是一个虚拟代码，但是您可以根据需要使用该功能来更改数字格式。

【讨论】：