На этом шаге мы рассмотрим основные возможности этого виджета.
Материал этого шага базируется на http://www.netopalto.ru/masked-input-plugin.html.
Расширение Masked Input позволяет упростить для пользователя ввод таких данных, как даты, номера телефонов или карточек социального страхования, в предопределенных форматах. Расширение автоматически вставляет в поле ввода служебные символы (такие как слеш, при вводе дат) и обеспечивает возможность ввода только определенных символов, соответствующих настройкам расширения.
Адреса, где можно взять компонент: http://digitalbush.com/projects/masked-input-plugin/ или http://archive.plugins.jquery.com/project/maskedinput.
Правила(формат) ввода определяется маской:
- 9 - цифра от 0 до 9;
- a - алфавитный символ (a-z, A-Z);
- * - алфавитно-цифровые символы (a-z, A-Z ,0-9).
Сначала нужно подключить jQuery и Masked Input Plugin.
<script src="js/jquery-1.9.0.js" type="text/javascript"></script> <script src="js/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
Затем определить маску для элементов, которых необходимо обеспечить правилом ввода.
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
Если вы хотите заменить знак подчеркивания (’_') в качестве заполнителя, можно передавать необязательный аргумент placeholder.
jQuery(function($){
$("#product").mask("99/99/9999",{placeholder:" "});
});
Дополнительно можно вызвать функцию после того, как ввод по маске был завершен.
jQuery(function($){
$("#product").mask("99/99/9999",{completed:function(){
alert("Было задано: "+this.val());
}});
});
Можно самостоятельно определять символы для маски.
jQuery(function($){
$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");
});
В заключание проиллюстрируем сказанное на конкретном примере.
Рис.1. Результат работы скрипта
Полный текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать расширения для работы с таблицами.
