Ноябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Простой способ маски телефона и pattern input tel

Простой способ маски телефона
Например, есть форма обратной связи с полем введите номер телефона.

Изначально без маски телефона можно ввести любой номер в любом формате даже с буквами.

Мы сделаем, чтобы ввод телефона строго соответствовал заданной маске.

Простой и эффективный способ это сделать с помощью плагина jquery.

Скачаем плагин с официального сайта jquery.

В поле поиска пишем mask и нажимаем на jQuery Masked Input.

jQuery Masked Input для маски телефона

Чтобы посмотреть инструкции работы плагина перейдем на github.

Из архива нам понадобится файл jquery.maskedinput.js.

Положим файл в папку с плагинами проекта libs и подключим новый плагин в файле gulpfile.js в том месте, где все подключенные скрипты упаковываются в один scripts.min.js.

Подробно о файле gulpfile.js можно прочитать тут.

подключаем плагин маски телефона к gulpfile.js

Добавим скрипт, чтобы работала маска.

Для этого откроем инструкцию и для телефона с идентификатором phone скопируем строку в common.js.

инструкция для маски телефона с идентификатором phone
Код в common.js.

Перейдем в index.html и у тега input телефона добавим id=phone.

Привязали поле ввода телефона с маской к скрипту.

Готовую форму с телефоном можно скачать тут.

Часть кода формы для маски телефона в index.html.

Добавим скрипт, чтобы работала маска телефона

Пример сложной маски телефона.

Есть городской номер и сотовый сделаем две разные маски для каждого вида телефона.

Добавим два поля выбора в форме с помощью select.

Код формы в index.html

Скрипт для нескольких полей телефона в common.js.

Пример сложной маски телефона

Если потребуется маска для даты по аналогии можно ее сделать код взять в инструкции к плагину.

Pattern input tel маски телефона в html.

Использовать атрибут pattern нужно без скрипта jquery иначе будет конфликт!

Выражения pattern для маски телефона.

  • \d, второй вид записи [0-9]. Запись одной цифры от нуля до девяти.
  • [0-9]{3} и [0-9]{2}. Запись трех и двух цифр подряд.
  • \s. Обозначение пробела.

Этими выражениями мы заполним pattern любого телефона.

Пример записи в index.html.

Комментариев нет

Комментарии:

Комментарии запрещены