10 января 2023, 19:41
528
Международная маска для телефона 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 });
});
Комментарии ()