BoostClicks | Арбитраж трафика

Как сделать простую, но эффективную маску для поля с номером телефона?

Не хочу подключать сторонние библиотеки и обвешивать ими сайт, поэтому сегодня делаем маску чисто на JS и HTML.
Для примера сделаем маску для гео RU.
Проверим вводимый номер регуляркой, автоматически добавим код страны:

<input class="form-control" id="exampleInputPhone" name="phone"
       onfocus="(function(event){ if (!event.target.value.length) { event.target.value = '+7'; } })(event)"
       oninput="(function(event){ event.target.value = event.target.value.replace(/[^0-9+]/g, ''); })(event)"
       pattern="^\+?[0-9]{10,14}$"
       title="Формат: +7XXXXXXXXXX. Проверьте правильность введённого номера."
       placeholder="Ваш телефон" type="tel" required>

❤486🔥143👍50

www.tgoop.com/boostclicks/242

1.42K viewsNov 17, 2024 at 07:07

Как сделать простую, но эффективную маску для поля с номером телефона?

Не хочу подключать сторонние библиотеки и обвешивать ими сайт, поэтому сегодня делаем маску чисто на JS и HTML.
Для примера сделаем маску для гео RU.
Проверим вводимый номер регуляркой, автоматически добавим код страны:

<input class="form-control" id="exampleInputPhone" name="phone"
       onfocus="(function(event){ if (!event.target.value.length) { event.target.value = '+7'; } })(event)"
       oninput="(function(event){ event.target.value = event.target.value.replace(/[^0-9+]/g, ''); })(event)"
       pattern="^\+?[0-9]{10,14}$"
       title="Формат: +7XXXXXXXXXX. Проверьте правильность введённого номера."
       placeholder="Ваш телефон" type="tel" required>

BY BoostClicks | Арбитраж трафика