10 января 2023, 19:41
 1059

Международная маска для телефона JS jQuery

Маска для ввода номера телефона в input в зависимости от кода страны без выпадающего списка.

Для удобства и порядка единого формата ввода телефонных номеров, удобно пользоваться масками ввода. Много криворуких пользователей, которые вводят номера телефонов как попало.

Маска ввода для input помогает сделать ввод номера телефона красивым и простым. В данном примере мы делаем маску для международного поля номера телефона.

При наборе кода страны, маска будет автоматом подставляться, например:

  • +1 (США)
  • +54 (Аргентина)
  • +7 (Россия)
  • +380 (Украина)
  • И так далее...
<label for="phone">Введите номер телефона</label>
<input name="phone" type="tel" placeholder="+_(___)___-____"/>

<script>
$(function() {
    $('input[type="tel"]').inputmask({ alias: "phone", "clearIncomplete": true });
});
</script>

<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.date.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/jquery.inputmask.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/phone-codes/phone.js"></script>
$(function() {
    $('input[type="tel"]').inputmask({ alias: "phone", "clearIncomplete": true });
});
Работаем с TimeWeb
Все наши проекты на хостинге TimeWeb - проверено временем.
  • Виртуальный хостинг - от 196 ₽ в месяц
  • Аренда VDS и VPS - от 169 ₽ в месяц
  • Выделенные серверы - от 4 941 ₽ в месяц
  • Конструктор сайтов - 159 ₽ в месяц
  • Быстрый хостинг
  • Облачные серверы
  • Цена + качество
  • Поддержка 24/7
  • Надежные дата-центры
  • Своя панель управления
  • Бесперебойная работа

10 января 2023, 19:41    Сергей Глазунов Блог 0    1059 0

Комментарии ()