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

问题描述

逻辑上是将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) // [phone]
}

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

解决方法

您是否尝试过替换行

console.log(number)

使用

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

？

,

由于我在论坛中的贡献很少，因此需要回答。

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) // [phone]
    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>