Использование jQuery Mask для маскировки ввода через форму

Маскировка ввода данных на веб-форме помогает улучшить пользовательский опыт, исключая ошибки при вводе. JQuery Mask – это удобный инструмент, позволяющий добавить маски ввода для различных типов данных, таких как телефонные номера или даты.

В статье объясняется, как настроить и применить JQuery Mask в ваших формах. Мы расскажем, как легко улучшить интерфейс и сделать его более удобным для пользователей, минимизируя шанс на ошибку при заполнении данных.

Обновлено: 2025-07-16 18:17:33 КК Константин Кондрусинавтор материала

Что такое jQuery Mask?

jQuery Masked Input plugin– это плагин для создания масок полей форм и HTML-элементов (maskedinput). Плагин прост в использовании и дружелюбен к пользователям. Хотя он изменяет вводимые данные, он делает это, не меняя того, что видит пользователь.

Посмотреть демо

Например, если вы напечатаете «555-555-5555 » в поле ввода номера телефона, «-» просто будет пропущено. Плагин сам обработает введенные символы так, чтобы они соответствовали маске.
Пройдемся по наиболее важным частям демонстрационного кода. Недавно я добавил в плагин две библиотеки:

• JQuery.
• jQuery Mask.

Эти библиотеки добавлены в настройки на CodePen. Ссылки на них нужно прописать в коде проекта, чтобы он работал.

Чтобы наложить маску на ввод, нужно добавить селектор jQuery и функцию .mask( … ) или использовать атрибут HTML data-mask.

Селектор jQuery

Ниже показан пример, в котором используется селектор jQuery. В примеры с почтовым индексом и номером телефона также применяется этот метод, а в примере с номером страховки (SIN number ) – атрибут data-mask.

$('input[name="date"]').mask('00/00/0000');

// "date" - дата

Я использовал имя поля ввода, чтобы выбрать его, а затем наложил на него маску с помощью функции .mask( … ). Она принимает последовательность чисел и букв и форматирует их с помощью регулярных выражений:

00/00/0000

Например, 12/04/2017.

Но пользователь все еще может перепутать дни и месяцы. Поэтому для дат я все же рекомендую использовать Date Picker из jQuery UI.

Функция .mask( … ) знает как форматировать введенные данные определенным образом, потому что в плагине определен «словарь» символов. По умолчанию перевод следующий:

• ‘0’: {pattern: /d/}
• ‘9’: {pattern: /d/, optional: true}
• ‘#’: {pattern: /d/, recursive: true}
• ‘A’: {pattern: /[a-zA-Z0-9]/}
• ‘S’: {pattern: /[a-zA-Z]/}

Если хотите переопределить или добавить что-то, руководствуйтесь следующим примеров, взятым из документации по jQuery Mask:

// теперь цифра 0 в паттерне маски будет восприниматься 
// как разрешенный символ вроде 0,1,2,3,4,5,6,7,8,9 и *
$('. your-field').mask('00/00/0000', {'translation': {0: {pattern: /[0-9*]/}}});

Атрибут данных HTML

Применение атрибута data похоже на использование селектора, только маску нужно вставить прямо в

<input … />

. Когда пользуюсь этим плагином, то часто применяю данный метод в файлах шаблонов. Рассмотрим пример с номером страховки:

<input type="text" name="social-insurance" data-mask="000 000 000" />

//"social-insurance" — социальная страховка

Использование jQuery Mask в WordPress

Для использования jQuery mask в WordPress, включите его в очередь скриптов в файле functions.php. Приведенный ниже код будет работать, если в теме есть папка /js:

<?php
 wp_enqueue_script( 'theme_slug-jquery-mask-js', get_template_directory_uri() . '/js/jquery.mask.min.js', array(), false, true);
 ?>

Я надеюсь, что после прочтения статьи вы попробуете jQuery Mask . Если у вас замечания по jQuery Mask, напишите об этом в комментариях!

КК Константин Кондрусинавтор статьи «Using jQuery Mask to Mask Form Input»