как добавить маску на форме обратной связи?

Question

Всем привет. Данные с формы обратной связи приходят с помощью бота в телеграм. И когда приходит сообщение с номером его неудобно скопировать, так как юзер может вписать с "+" или с "8" Помогите добавить маску что в input было вбито начало номера "+375".

<input name="phone" type="tel" class="contact-form__input contact-form__input_phone" placeholder="Телефон">

Что необходимо добавить в js?

Answer 1

$(document).ready(function() {
    $("input[name='phone']").mask("+375 (99) 999-99-99");
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<input name="phone" type="tel" class="contact-form__input contact-form__input_phone" placeholder="Телефон" value="+375">

Answer 2

Если просто надо чтобы значение input-а начиналось с +375, то можно просто выставить это значение с самого начала, а потом слушать изменение значения

Сейчас стоит всего одна проверка - начинается ли строка с +375, если нет, то заменяем значение на старое значение, а если да, то заменяем старое значение на новое.

Проверки дальше можно ставить на свой вкус, в целом думаю идея понятна

const phone = document.querySelector('#phone');
const phoneStart = '+375';

phone.value = phoneStart;

let phoneOldValue = phone.value;

phone.addEventListener('input', () => {  
  if (phone.value.startsWith(phoneStart)) phoneOldValue = phone.value;
  else phone.value = phoneOldValue;
})

<input id="phone" name="phone" type="tel" class="contact-form__input contact-form__input_phone" placeholder="Телефон">

БЛОГ НА HUSL

как добавить маску на форме обратной связи?

Ответы (2 шт):

P.S. Есть одна проблема (если, конечно, это проблема) при попытке изменить начало строки, курсор перемещается в конец строки