Как-то на хабре разгорелся спор, как заставить пользователя вводить дату в правильном формате, было множество интересных решений, но заставлять пользователя совершенно не надо — пусть за пользователя основную работу делают машины :-).
На помощь приходит замечательный скрипт «Masked Input Plugin», который позволяет назначить для каждой формы маску, по которой данные будут заполнятся.
Возможно Вы не совсем поняли, но лучше один раз увидеть, чем сто раз услышать.
Живой пример
К сожалению, живой пример на хабру не вставить, нажмите на картинку чтобы его посмотреть.
Реализация форм с маской
Как вы уже поняли, для начала нам понадобится скрипт «Masked Input Plugin» написанный на jQuery, его размер поистине радует 2.8 килобайта.
Такой маленький, а столько пользы!
И так, пример использования скрипта:
<script type="text/javascript">
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
</script>Этот скрипт будет добавлять узнанную маску для форм с id: date, phone, tin, ssn.Теперь о масках символов:
- a — Все алфавитные значения (A-Z,a-z)
- 9 — Все цифровые значения (0-9)
- * — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)
Теперь более расширенный функции:
jQuery(function($){
$("#product").mask("99/99/9999",{placeholder:" "});
});Этот скрипт позволяет заменить стандартный для символ нижнего подчеркивания на любой котовый вы хотите, в данном сулчае он заменяется на пробел.
jQuery(function($){
$("#product").mask("99/99/9999",{completed:function(){alert("Вы ввели: "+this.val());}});
});
Этот позволяет исполнять любую функцию по заверению ввода в форму.Вкратце функционал я описал, более подробно вы можете прочитать на сайте автора этого замечательного скрипта.
Посетить страницу «Masked Input Plugin»
Подписаться на заметки Чернева по RSS
