В настоящее время на многих web-сайтах предусмотрена возможность отправки форм обратной связи, некоторые поля которых предназначены для передачи контактных данных или другой типовой информации. Очень часто бывает важно чтобы эти данные приходили на сервер в едином формате. В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.
Отличительные особенности и возможности плагина Masked Input:
- удобство в использовании
- гибкая настройка
- возможность управления функциями включение/отключение/настройка параметров
- поддержка валидации/чтения
- поддержка регулярных выражений
- проверка элемента на заполнение/форматирование
Плагин масок полей ввода состоит из основных частей:
- Демонстрационная HTML разметка
- JQuery скрипт с кодом плагина
Пример установки плагина Masked Input
Скачайте архив с плагином из репозитория разработчика и скопируйте его содержимое в каталог вашего сайта.
!!! Для работы скрипта обязательно наличие подключенной библиотеки jQuery.
Инициализация и настройка плагина Masked Input.
Подключите к документу фреймворк jQuery и сам плагин. Обратите внимание, что ранние версии плагина могут не работать с более поздними версиями jquery.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput.js"></script>Для подключения маски к полю ввода необходимо добавить соответствующий класс или id:
<form action="/">
<input class="date" type="text" name="name"><br>
<input class="phone" type="text" name="name"><br>
<input class="phoneext" type="text" name="name"><br>
<input class="tin" type="text" name="name"><br>
<input class="ssn" type="text" name="name"><br>
<input class="product" type="text" name="name"><br>
<input class="eyescript" type="text" name="name"><br>
<button type="submit" name="submitbtn" value="Отправить">Отправить</button>
</form>И инициализировать плагин маски ввода:
<script>
jQuery(function($){
$('.date').mask('99/99/9999');
$('.phone').mask('(999) 999-9999');
$('.phoneext').mask("(999) 999-9999? x99999");
$(".tin").mask("99-9999999");
$(".ssn").mask("999-99-9999");
$(".product").mask("a*-999-a999");
$(".eyescript").mask("~9.99 ~9.99 999");
});
</script>Базовые условные обозначения:
- a — буквы
- 9 — цифры
- * — буквы и цифры
- ? — необязательная часть маски
Часть маски может быть вариативной. Символ «?» маркирует все последующие за ним символы как необязательные, т.е. все, что следует после него, считается необязательным для ввода. Пример:
$('.phoneext').mask("(999) 999-9999? x99999");Дополнительные настройки плагина
1. Возможность создания собственных наборов символов для ввода.
Для создания наборов символов используется свойство definitions, пример:
<script>
$(document).ready(function(){
$.mask.definitions['~']='[+-]';
$(".eyescript").mask("~9.99 ~9.99 999");
})
</script>2. Выполнение действия после завершения ввода.
По завершении ввода можно выполнить функцию с помощью метода completed, пример:
<script>
$(document).ready(function(){
$(".ssn").mask("999-99-9999",{completed:function(){alert(“Поле заполнено!”)}});
})
</script>3. Подстановка плейсхолдера в поле ввода.
С помощью свойства placeholder, можно поставить плейсхолдер на текущее поле ввода, пример:
<script>
$(document).ready(function(){
$(".date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
})
</script>Заключение
Пожалуй, это вся необходимая информация для эффективного использования плагина jquery MaskedInput. Всем спасибо за внимание!
