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

Международная маска для телефона 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 });
});

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

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