Супер-юзабильные формы
Как-то на хабре разгорелся спор, как заставить пользователя вводить дату в правильном формате, было множество интересных решений, но заставлять пользователя совершенно не надо — пусть за пользователя основную работу делают машины :-).
На помощь приходит замечательный скрипт «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 действительно штука хорошая, хотя и не продуман вариант с денежными величинами
красивая и весьма не практичная штука
хорошо, спасибо за данный скрипт
Подскажите, а если нужно чтобы маску сразу было видно а не при нажатии, что сделать?
Супер очень доволен спасибо ;)
А как получить доступ к переменной формы?
$a = $_POST['number'];
echo $a;
ничего не выводит
как сделать так, чтобы после окончания ввода, если набрано поле не полностью, значение не удалялось?
Thancks за такую заметку. Очень интересная – продолжай в том же духе.
Wow, incredible blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is wonderful, as well as the content!. Thanks For Your article about Супер-юзабильные формы | Чернев.ру .
Fantastic goods from you, man. Супер-юзабильные формы | Чернев.ру I have understand your stuff previous to and you are just too great. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I cant wait to read far more from you. This is really a great Супер-юзабильные формы | Чернев.ру informations.
Would you be inquisitive about exchanging links?
Good a single blog owner achievement webpage article fantastic sharings in such a blog constantly have fun
Seriously required put up admin good 1 i bookmarked your world-wide-web webpage see you in up coming blog put up.
you will be really quantity 1 admin your blogging is remarkable i constantly examine your webpage i’m certain you will likely be the most effective
oh my god amazing post admin will check your weblog always
Hello admin great put up significantly thanks loved this website definitely a lot
that you are really variety one admin your running a blog is remarkable i often examine your weblog i am positive you will likely be the most effective
I was browsing for this good sharing admin considerably thanks and also have good running a blog bye
I used to be seeking this web site final three nights fantastic blog manager good posts everything is wonderful
i bookmarked you in my browser admin thank you so much i will be looking for your up coming posts
Hello admin good submit much thanks loved this web site actually significantly
Your house is valueble for me. Thanks!…
I was curious about your future submit admin actually essential this blog site super incredible web site
Great 1 website manager achievements blog put up fantastic sharings with this blog usually have enjoyable
I was curious about your upcoming put up admin genuinely required this web site super amazing blog site
i cant get how it is possible to share like this amazing posts admin significantly thanks
Great a person weblog operator results blog site submit good sharings within this blog site usually have exciting
Seriously essential article admin wonderful one i bookmarked your net web page see you in subsequent blog publish.
I used to be looking for this webpage very last a few nights good website operator fantastic posts everything is wonderful