[SOLVED] auto formatting 10 digits phone number as entered in the input field

auto formatting 10 digits phone number as entered in the input field

In the logic is for auto formatting 10 digits phone number into the following format (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 logic to format


_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 shows the correct format in Console.

Solution

Have you tried by replacing the line

console.log(number)

With

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