Например, есть форма обратной связи с полем введите номер телефона.
Изначально без маски телефона можно ввести любой номер в любом формате даже с буквами.
Мы сделаем, чтобы ввод телефона строго соответствовал заданной маске.
Содержание статьи
Простой и эффективный способ это сделать с помощью плагина jquery.
Скачаем плагин с официального сайта jquery.
В поле поиска пишем mask и нажимаем на jQuery Masked Input.
Чтобы посмотреть инструкции работы плагина перейдем на github.
Из архива нам понадобится файл jquery.maskedinput.js.
Положим файл в папку с плагинами проекта libs и подключим новый плагин в файле gulpfile.js в том месте, где все подключенные скрипты упаковываются в один scripts.min.js.
Подробно о файле gulpfile.js можно прочитать тут.
Добавим скрипт, чтобы работала маска.
Для этого откроем инструкцию и для телефона с идентификатором phone скопируем строку в common.js.
Код в common.js.
1 2 3 |
$(function() { $("#phone").mask("(999) 999-9999"); }); |
Перейдем в index.html и у тега input телефона добавим id=phone.
Привязали поле ввода телефона с маской к скрипту.
Готовую форму с телефоном можно скачать тут.
Часть кода формы для маски телефона в index.html.
1 2 3 |
<div class="col-xs-12"> <input type="text" name="phone" id="phone" required placeholder="+7 (999) 111 22 33" class="form-control form-input"> </div> |
Пример сложной маски телефона.
Есть городской номер и сотовый сделаем две разные маски для каждого вида телефона.
Добавим два поля выбора в форме с помощью select.
Код формы в index.html
1 2 3 4 5 6 7 8 |
<div class="col-xs-12"> <label for="phone">Телефон </label> <select id="vid" class="form-control"> <option value="sot"><img src="">Сотовый +7</option> <option value="gor">Городской</option> </select> <input type="text" name="phone" id="phone" required placeholder="+7 (999) 111 22 33" class="form-control form-input"> </div> |
Скрипт для нескольких полей телефона в common.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { $(function() { function maskPhone() { var vid = $('#vid option:selected').val(); switch (vid) { case "sot": $("#phone").mask("+7(999) 999-99-99"); break; case "gor": $("#phone").mask("999-99-99"); break; } } maskPhone(); $('#vid').change(function() { maskPhone(); }); }); |
Если потребуется маска для даты по аналогии можно ее сделать код взять в инструкции к плагину.
Pattern input tel маски телефона в html.
Использовать атрибут pattern нужно без скрипта jquery иначе будет конфликт!
Выражения pattern для маски телефона.
- \d, второй вид записи [0-9]. Запись одной цифры от нуля до девяти.
- [0-9]{3} и [0-9]{2}. Запись трех и двух цифр подряд.
- \s. Обозначение пробела.
Этими выражениями мы заполним pattern любого телефона.
Пример записи в index.html.
1 2 3 |
<div class="col-xs-12"> <input type="tel" name="phone" id="phone" pattern="+7 ([0-9]{3}([0-9]{3})([0-9]{2})([0-9]{2})" required class="form-control form-input"> </div> |