JQuery MaskedInput - это удобный javascript плагин, который позволяет создавать маски ввода для полей форм на сайте. Благодаря ему можно задать нужный формат данных, которые вводит пользователь в input. Это сильно упрощает последующую обработку информации из форм. Давайте разберемся с основными возможностями этого плагина.
Что такое маска ввода
Маска ввода - это шаблон, который накладывает ограничения на вводимые пользователем данные в поле формы. Например, маска для номера телефона разрешит вводить только цифры в определенном количестве. А маска для email не даст отправить форму, пока пользователь не введет в поле корректный адрес электронной почты.
Использование масок ввода дает несколько преимуществ:
- Повышает удобство заполнения форм для пользователя. Не нужно думать о формате данных.
- Уменьшает количество ошибок при вводе информации.
- Позволяет получить данные из формы в нужном для обработки виде.
Установка jQuery MaskedInput
Существует несколько способов установки этого плагина в проект:
- Скачать архив с GitHub и подключить файлы jQuery и jquery.maskedinput.min.js
- Установить через менеджер пакетов NPM
- Подключить готовую сборку с CDN
В любом случае, плагин требует наличия библиотеки jQuery. Маску ввода можно инициализировать для любого поля ввода на странице:
$(selector).mask(mask, options)Где в качестве селектора можно указать класс, ID или другой jQuery селектор элемента input.
Формат маски ввода
Основной параметр при инициализации плагина - это mask. Это строка, которая задает формат вводимых данных с помощью специальных символов:
- 9 - разрешен ввод цифр
- a - разрешен ввод букв
- * - любой символ
Например, маска для номера телефона в России может выглядеть так:
+7 (999) 999-99-99Это заставит пользователя ввести номер именно в таком формате. Все другие символы не разрешены.
Дополнительно в формате маски можно использовать:
- ? - предыдущие символы становятся необязательными
- Defs - создание собственных наборов символов
Например, маска для IP адреса с необязательным портом выглядит так:
999.999.999.999?99999В целом формат маски дает много возможностей для создания шаблонов под любые типы данных.
Дополнительные параметры
Помимо формата маски, в плагин можно передать объект с дополнительными параметрами:
$(selector).mask(mask, { placeholder: "_", completed: handler, }); Основные из них:
- placeholder - символ заполнитель
- completed - обработчик на завершение ввода
- clearIncomplete - очистка поля при неверном вводе
- clearMaskOnLostFocus - очистка маски при потере фокуса
Эти параметры дают дополнительные возможности при создании масок ввода.
Примеры использования
Давайте теперь разберем несколько примеров создания масок ввода с помощью jQuery MaskedInput.
Маска для email
$('.email').mask('a{3,20}@a{3,10}.a{2,3}'); Это позволит ввести в поле только корректный email в формате mymail@mail.com. Можно настроить длину локальной части и домена.
Маска для номера карты
$('.card').mask('9999 9999 9999 9999'); Задает формат ввода для 16-ти значного номера карты с пробелами. Такой формат удобен для чтения.
Маска для HEX цвета
$.mask.definitions['h'] = '[A-Fa-f0-9]'; $('.hex').mask('##hhhhhh'); Сначала мы определяем новый placeholder "h", который разрешает ввод только HEX символов. Затем используем его в маске для поля с HEX кодом цвета.
В этой статье мы разобрали основы использования плагина jQuery MaskedInput. Он позволяет легко создавать маски ввода для получения данных в нужном формате из web-форм. Этот полезный инструмент стоит добавить в арсенал каждого веб-разработчика.
Дополнительные возможности
Помимо базовых возможностей, jQuery MaskedInput предоставляет и более продвинутый функционал.
Валидация введенных данных
С помощью масок можно не только задать формат ввода, но и валидировать введенные данные. Для этого можно использовать регулярные выражения.
Например, чтобы разрешить ввод только корректного email в поле, маска будет выглядеть так:
$('.email').mask(/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/); Это регулярное выражение проверит структуру введенного email и не даст отправить форму с невалидным адресом.
Интеграция с другими плагинами
Маски ввода из MaskedInput можно комбинировать с другими полезными плагинами для инпутов.
Например, с Select2 для выпадающих списков. При выборе значения из списка можно менять маску ввода в другом поле.
Или проверять введенные данные через ajax с подсказками для пользователя.
Нестандартные маски
С помощью callback функций и пользовательских defs можно создавать нестандартные маски ввода под нужды проекта.
Например, маска которая принимает только четные числа или только слова на определенном языке.
Оптимизация производительности
При использовании масок на большом количестве полей на странице стоит оптимизировать работу плагина:
- Инициализировать маски не на каждом инпуте, а на родительском блоке
- Вынести общие определения в отдельный вызов
- Использовать debounce для ввода
Это позволит снизить нагрузку на браузер и ускорить работу страницы.
Расширенные примеры
Рассмотрим несколько более сложных примеров использования jQuery MaskedInput.
Маска в зависимости от страны
Можно сделать маску для телефона, которая будет меняться в зависимости от выбранной пользователем страны.
let countryMask = { RU: '+7 (999) 999-99-99', US: '+1 (999) 999-9999', }; $('.phone').mask(countryMask['RU']); $('.country').on('change', function() { let mask = countryMask[$(this).val()]; $('.phone').mask(mask); }); При смене страны в первом селекте будет устанавливаться маска для номера телефона в соответствии со страной.
Динамические маски
Можно задавать маску для поля динамически на основе других данных.
Например, если пользователь ввел в первое поле 3 символа, то во втором поле нужна маска из 5 символов. А если больше 5 символов, то маска из 7 символов.
$('#field1').on('input', function(){ let length = $(this).val().length; if(length <= 3) { $('#field2').mask('00000'); } else if (length <= 5) { $('#field2').mask('0000000'); } else { $('#field2').mask('00000000'); } }); Таким образом маска для поля будет меняться динамически в зависимости от данных формы.
Решение распространенных проблем
При использовании jQuery MaskedInput могут возникнуть некоторые типичные проблемы. Давайте разберем как их решить.
Маска не работает в Safari или iOS
В некоторых браузерах есть особенности с работой масок ввода. Например, в Safari маска может не отображаться корректно.
Чтобы это исправить, нужно явно указать атрибут maxlength для поля ввода равный длине маски. Например:
<input type="text" class="phone" maxlength="18">
Маска не срабатывает на динамических элементах
Если поле ввода генерируется динамически через JavaScript, нужно повторно инициализировать на нем маску после создания.
$('.form').append('<input class="phone">'); $('.phone').mask('+7 (000) 000-00-00'); Курсор прыгает при вводе в маске
Это может происходить из-за того, что плагин ставит и удаляет символы заполнителя при вводе. Чтобы избежать этого, можно отключить автоматическое заполнение:
$('.phone').mask('+7 (000) 000-00-00', {autoUnmask: false}); Ошибки в консоли браузера
Некоторые проблемы могут вызывать ошибки в консоли Javascript. Например, конфликт версий jQuery и плагина.
Нужно проверить версию подключенной библиотеки jQuery и установить совместимую версию MaskedInput.
Особенности мобильных браузеров
При использовании масок ввода на мобильных устройствах есть некоторые нюансы.
Клавиатура с автозаполнением
На iPhone по умолчанию включена клавиатура которая автоматически добавляет следующий символ маски при вводе.
Нужно отключить автозаполнение, чтобы маска работала корректно.
Задержка при вводе
На некоторых Android устройствах может быть заметная задержка при вводе в маску, особенно при сложных форматах.
Помогает явно указать атрибут maxlength или использовать более простые маски.
Кастомные шрифты
Системные шрифты на мобильных могут влиять на отображение символов маски.
Лучше использовать кастомные web-шрифты, чтобы избежать таких проблем.
Альтернативы MaskedInput
Рассмотрим популярные альтернативы плагину jQuery MaskedInput и их особенности.
Vanilla Masker
Легковесный плагин без зависимостей. Меньше возможностей, чем MaskedInput, зато работает быстрее.
Inputmask
Мощный функционал и разнообразные маски. Больше настроек, сложнее в освоении.
Cleave.js
Позволяет форматировать введенные данные, а не только ограничивать ввод. Есть поддержка phone и credit card.
В целом все эти плагины решают схожие задачи. Выбор зависит от потребностей конкретного проекта.
