Во второй части статьи рассмотрим подключение простой маски для номеров не только РФ.
Первая часть статьи доступна по ссылке https://getguru.ru/maska-nomera-telefona-v-forme/.
Итак, на странице у нас уже есть форма с прописанным классом для поля Телефон и скрипты.
В первую очередь, нам необходимо заменить скрипт
$(document).ready(function() {
$(".phone-input > div > div > input").mask("+7 (999) 99-99-999");
});Вместо него добавляем:
$(document).ready(function() {
$(function() {
function maskPhone() {
var country = $('#country option:selected').val();
switch (country) {
case "ru":
$(".phone-input > div > div > input").mask("+7(999) 999-99-99");
break;
case "ua":
$(".phone-input > div > div > input").mask("+380(999) 999-99-99");
break;
case "by":
$(".phone-input > div > div > input").mask("+375(999) 999-99-99");
break;
}
}
maskPhone();
$('#country').change(function() {
maskPhone();
});
});
});Обратите внимание, страны для формы мы прописываем сами.
Сейчас в форме можно распознать 3 страны: РФ, Украина и Белоруссия.
Для добавления новой страницы в скрипте нужно добавить строки
case "УКАЗАТЬ":
$(".phone-input > div > div > input").mask("+33(999) 99-99-99");
break; Изменить название case на свое. Например, fr — мы будем понимать, что маска для номеров телефонов Франции.
Также измените непосредственно маску. Например, +33(999) 999-99-99
Дополнительно в настройки формы нам нужно добавить новое поле html.
И добавить в него выбор стран.
<label for="phone">Страна: </label>
<select id="country" class="form-control">
<option value="ru">Россия +7</option>
<option value="ua">Украина +380</option>
<option value="by">Белоруссия +375</option>
</select>Обратите внимание, значения строк option value должны быть равны значениям case из скрипта.
В итоге форма будет выглядеть вот так:
Возможно, в следующей статье мы разберем оформление масок. Например, чтобы в форме пользователь выбирал флаг страны и далее вписывал номер телефона.
Если возникли вопросы, задавайте их в поле Комментарии или пишите в чате Телеграм.
