自动格式化输入字段中输入的 10 位电话号码答案

【问题标题】：auto formatting 10 digits phone number as entered in the input field自动格式化输入字段中输入的 10 位电话号码
【发布时间】：2020-09-14 23:53:41
【问题描述】：

在逻辑中用于将 10 位电话号码自动格式化为以下格式 (xxx) 234-3456

<div class="field-group" style="align-items: center;">
    <div>
        <se-singleselect selected="{{phoneItem.phoneTypeId}}" fieldvalue="phoneTypeId" fieldname="name" desc="Phone Type" datasrc="{{_phoneTypes}}" id="phoneTypeSelect"></se-singleselect>
    </div>
    <div>
        <input type="text" id="phoneNumber" class="phone" name="phoneNumber" maxlength="14" placeholder="(xxx) xxx-xxxx" on-input="_allowNumbersCharsOnly" on-change="_formatPhoneNumber" value="{{phoneItem.phoneNumber::input}}">
    </div>
</div>

要格式化的 JavaScript 逻辑


_formatPhoneNumber(digit) {
    let number = digit.target.value.replace(/[^\d]/g, '')
    if (number.length == 10) {
        number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
    }
    console.log(number) // (123) 456-6789
}

console.log 在控制台中显示正确的格式。

【问题讨论】：

那么问题是什么？您没有重新设置值

标签： javascript forms autoformatting

【解决方案1】：

你试过换行吗

console.log(number)

有

Document.getElementById("phoneNumber").value = number

【讨论】：

【解决方案2】：

由于我在论坛中的贡献很少，因此回复了答案。

let phoneNumber = document.getElementById('phoneNumber');
phoneNumber.addEventListener('change',_formatPhoneNumber);
phoneNumber.addEventListener('keyup',_formatPhoneNumber);

function _formatPhoneNumber(evt) {
    let number = evt.target.value.replace(/[^\d]/g, '')
    if (number.length == 10) {
        number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
    }
    //console.log(number) // (123) 456-6789
    evt.target.value = number;
}

<div class="field-group" style="align-items: center;">
    <div>
        <se-singleselect selected="{{phoneItem.phoneTypeId}}" fieldvalue="phoneTypeId" fieldname="name" desc="Phone Type" datasrc="{{_phoneTypes}}" id="phoneTypeSelect"></se-singleselect>
    </div>
    <div>
        <input type="text" id="phoneNumber" class="phone" name="phoneNumber" maxlength="14" placeholder="(xxx) xxx-xxxx" on-input="_allowNumbersCharsOnly" on-change="_formatPhoneNumber" >
    </div>
</div>

【讨论】：