Супер-юзабильные формы
Как-то на хабре разгорелся спор, как заставить пользователя вводить дату в правильном формате, было множество интересных решений, но заставлять пользователя совершенно не надо — пусть за пользователя основную работу делают машины :-).
На помощь приходит замечательный скрипт «Masked Input Plugin», который позволяет назначить для каждой формы маску, по которой данные будут заполнятся.
Возможно Вы не совсем поняли, но лучше один раз увидеть, чем сто раз услышать.
Живой пример
|
Дата Формат: 99/99/9999 |
Телефон Формат: (999) 999-9999 |
|
Tax ID Формат: 99-9999999 |
SSN Формат: 999-99-9999 |
Ужасно просто и ужасно гениально.
Реализация форм с маской
Как вы уже поняли, для начала нам понадобится скрипт «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());}});
});
Этот позволяет исполнять любую функцию по заверению ввода в форму.
Вкратце функционал я описал, более подробно вы можете прочитать на сайте автора этого замечательного скрипта.
Был бы такой на прототайпе, то у меня был бы приступ эйфории =)
Спасибо, за материал!
Идея очень интересная, но есть ньюанс: эти маски не помешают выбрать 87-ое число 55-ого месяца =)
Ну этот скрипт для создания правильного формата заполнения, а не для валидации.
Сижу я значит, делаю форму для своего сайтика… устал… решил отвлечься, отдохнуть посмотрев что нибудь интересное, и вдруг на тебе….наткнулся на эту замечательную запись :)
Спасибо, что открыл для меня этот плагинчик! :)
А почему табом нельзя переключиться на соседнее поле?
Теперь все нормально ;-)
А если в первой форме ввести (там где 99/99/9999) 15/5/1515 то при снятии фокуса с формы,текст пропадает, и мне заново надо вводить форму, но ведь я ввёл вроде бы правильно, не зставишь же пользователя писать 05, место 5?
А если в первой форме ввести (там где 99/99/9999) 15/5/1515 то при снятии фокуса с формы,текст пропадает, и мне заново надо вводить форму, но ведь я ввёл вроде бы правильно, не зставишь же пользователя писать 05, место 5?
зы: это премодерация или просто коментарии не отправляются?
Попробую на прототайп переписать. Не шустр, так что результат будет не раньше чем через 2 недели.
1) при вставке через ctrl+v в Опереи и в Сафари вставка не корректоируется.
2) при выделении части введённого текста и перетаскивании его мышкой в другое место в инпуте в Опере контент дублируется, в ИЕ7 он перемещается, но не дублируется…
В Опере при удаленнии бэкспейсом всавляется пустой символ.
Если нажимать backspce+end много раз получается прикольно :)
Баг на баге и багом погоняет :)
Ужасно…
Скрипт нужно дорабатывать. Вас никто не заставляет использовать его как есть.
Такое нельзя писать про скрипт, который бажит и его надо дорабатывать…
Интересно, но не более.
В моих проектах в формы можно вводить, дату например, как угодно (хоть пятое июля, хоть 5 июля, и т.п.); обработка этого производится на сервере, где, по моему скромному мнению, и должна происходить.
То есть, пользователь должен быть волен ввести дату так, как ему нравится.
Просветите: нужно ли какие то действия предвортельные для спользования скриптов написанных на jQuery? Нужно ли что-то устанавливать до?
Ничего не надо устанавливать.
Подключил библиотеку jQuery, подключил необходимый плагин, наслаждаешься (-:
Вот эта фраза собственно интересует «Подключил библиотеку jQuery» – как это сделать?
… кто не спрашивает, тот не учиться)
Попробуйте начать с прочтения для начинающих.
Усовершенствованной версии не ожидается?
$(’#phone’).mask(’8-099-999-99-99′);
Эта маска бажит в IE при переходе на следующее поле.
meioMask – – более продвинутый, но тоже не без недостатков.
Мне бы хотелось, чтобы можно было добавлять 2 телефона, добавить добавочный номер, два варианта мобильного, ведь он может быть с федеральным номером, а может быть с городским.
В общем есть куда копать, а так Masked Input Plugin действительно штука хорошая, хотя и не продуман вариант с денежными величинами
красивая и весьма не практичная штука
хорошо, спасибо за данный скрипт
Подскажите, а если нужно чтобы маску сразу было видно а не при нажатии, что сделать?