Блог

Главная - Вопросы по программированию - автоматическое форматирование 10-значного номера телефона, введенного в поле ввода

автоматическое форматирование 10-значного номера телефона, введенного в поле ввода

#javascript #forms #autoformatting

#javascript #формы #автоматическое форматирование

Вопрос:

В логике используется автоматическое форматирование 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
}

консоль.журнал показывает правильный формат в консоли.

Комментарии:

1. так в чем проблема? Вы не устанавливаете значение обратно

Ответ №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>