Маски ввода для текстовых полей
В этой демонстрации вы научитесь работать с масками ввода для текстовых полей форм.
Маски ввода позволяют указать формат допустимых значений для текстовых полей. Например, маска для телефона может выглядеть как +7 (___) ___-__-__.
Попутно обсудим, чем хорошая маска отличается от плохой.
Начнём с создания формы, в которой будет текстовое поле ввода.
Добавим поле ввода <input> для номера телефона и подпись <label> для повышения доступности интерфейса. Скроем <label> со всем уважением к стандартам доступности. Стилизацию разбирать не будем.
Для <input> укажем атрибуты:
class — понадобиться для связывания с JS;type="tel" — для корректного отображения клавиатуры на мобильных устройствах;id — для связывания с <label>;name — для отправки данных на сервер;placeholder — для подсказки пользователю.
Подключим библиотеку для работы с масками imask.js.
В демонстрации библиотека подключается локально. Вы можете подключить библиотеку по внешней ссылке:
<script src="https://unpkg.com/imask"></script>
Создадим файл script.js и подключим его сразу после библиотеки. script.js понадобится для настройки параметров маски ввода.
Перейдём в файл script.js и начнём настройку маски. Для начала найдём и сохраним единственный <input> с телефоном, у которого будет маска.
Начнём создавать конфигурацию маски.
Определимся с форматом номера телефона. В нём будет несколько частей:
+7 — код страны;(800) — код оператора в круглых скобках;555-86-26 — номер абонента, разделённый дефисами xxx-xx-xx.
Создадим шаблон маски ввода для нужного нам формата номера телефона.
IMask умная библиотека с простым принципом создания шаблонов: все символы, которые можно менять, задаём как 0, все символы, которые нельзя менять, задаём «как есть» (в том числе и пробелы).
То есть для нашего формата телефона шаблон выглядит как +7 (000) 000-00-00.
Маска создана. Осталось её подключить и проверить как она работает. Для этого вызовем функцию IMask(), в которую передадим элемент <input> и настройки маски.
Теперь попробуйте ввести любой номер телефона. Это работает! 😱
Обратите внимание, что буквы невозможно ввести.
Чем хороша эта маска? Тем, что номер телефона можно начать вводить как с +, так и с 7. А можно начать сразу с кода оператора, например, с 921.
Введите сначала 7921. Потом удалите результат и введите 921. Разницы не будет.
Пользователь всегда тревожится и не понимает, с какой цифры ему начинать вводить номер телефона. Такой подход снизит тревогу.
Маска не должна мешать вводу данных в input. Это самое главное правило, которому вы должны следовать при подключении маски. Ввод номера телефона может быть не только с клавиатуры, но и из буфера обмена.
Выделите по очереди номера телефонов из списка ниже, скопируйте в буфер обмена с помощью Ctrl + C и вставьте в input с помощью Ctrl + V.
+7 (800) 555-86-28
+7800 555-86-28
+7800555-86-28
+78005558628
8005558628
Как видите, маска отработала для всех вариантов написания номера.
Маски можно использовать не только для номеров телефонов, но и для любых данных, которые нужно привести к определенному формату. Например, для номера карты, почты, даты и так далее.
Давайте создадим маску для номера карты. Она должна иметь вид: 0000 0000 0000 0000. Введите любые 16 цифр, чтобы увидеть, как работает маска.
Создать input, который принимает дату рождения по маске, также достаточно просто.
Чтобы вывести подсказку по заполнению можно указать lazy: false. В этом случае появятся «платформы» для каждого символа.
Пока задача с датой решена плохо, можно ввести 99 марта 9999 года.
Чтобы маска учитывала корректность введённых дат, нужно задать маске тип Date. Также можно указать минимальную и максимальную даты.
Создадим маску для целых чисел, которая по мере ввода будет добавлять разделитель разрядов. Для этого укажем тип маски Number. И добавим параметр thousandsSeparator, в значении которого укажем ' ' (пробел как разделитель разрядов).
Попробуйте ввести длинное число, а также поменять значение разделителя.
Вот так легко и просто можно создавать типовые маски ввода с помощью библиотеки IMask. О всех возможностях библиотеки читайте в документации.
Демонстрация завершена.
