Супер-юзабильные формы

[@sk1p]

Вот сразу минус: кликнешь не в самом начале инпута и получается фигня. А так, идея неплоха.

[@bO_oblik]

Но для этого как миним нужно сделать два клика.

[@sk1p]

Не знаю, почему, но когда смотрел на сайте автора — так и выходило. Проверил сейчас — все ок, вы правы =/

[@almaz]

может не у всех? ещё раз как и куда тыкать-то? ;)

[@woweb]

не обращайте внимание, скрипт работает корректно, просто почему-то «sk1p» решил искать сразу минусы… Он имел в виду, что если кликаешь на середину поля, то курсор становится на место куда кликнул…

Даже если со второго клика и можно поставить курсор не в начало инпута, то проблему это не создает, так основная задача скрипта заключается в правильном заполнении поля, с которой он справляется на отлично!

[@jodaka]

это как-минимум недоделанный вариант

во первых — не полностью введенные формы почему-то обнуляются, если теряют фокус (ЗАЧЕМ?)
во вторых — необходимо дописывать хотя-бы базовый контроль правильности введенных данных (чтобы идиотских дат типа 99/99/9999 не было)
в третьих — не забывать про золотое правило: не верить юзеру и ещё раз проверять все данные на сервере :)

[@malicious]

Ага, шёл тридцать седьмой день семидесятого месяца.

[@malicious]

Да, про тридцатое февраля и т.п. тоже не забудьте. По-хорошему, календарик прикрутить надо.

[@woweb]

как же мы любим ко всему придираться.
1. обнуляется потому что неправильно заполнено, подумайте, как часто вы теряете фокус при вводе номера телефона или даты рождения.
2. это просто пример того как можно сделать проверку правильности заполнения формы на лету, на самом деле для грамотных людей не составит труда перенести эту идею под свои нужды и не давать вводить несуществующих дат.
3. не вижу как данный скрипт может повлиять на золотое правило связанное с проверкой всего на сервере, ведь яваскрипт всегда можно отключить и ввести то, что пожелаешь…

Находить какие-то мнимые недостатки всегда легко…

[@sunnybear]

Для грамотный людей не составит труда разобраться в 8Кб JS-кода, однако, это все равно, что прикручивать автозаполнение a-la google — лучше один раз сделать самому, чем разбираться с возможными последствиями.

Я не пытаюсь раскритиковать данный плагин — это, действительно, вещь хорошая и нужная. Просто если бы к ней добавить кастомизацию, проверку введенных данных у форм (совместить еще с парой jQuery-плагинов) и добавить интерфейсов — сообщество бы восприняло это на ура. Только вот, боюсь, это все никому не нужно…

[@croatian]

Я скрипт еще не смотрел, но по-моему там можно задавать свои маски?

[@Obi]

Таб не переключает на соседнее поле, да и коды городов бывают не только 3-х значные, но и 4-х, и даже 5-ти.

[@bO_oblik]

Таб исправил.

[@woweb]

таб прекрасно работает, между полями. и если не заметил то эта форма заточена под американские значения, и является лишь примером использования, не вижу смысле придераться к тому, что бывают коды городов с большим количеством цифер

[@Obi]

>> таб прекрасно работает, между полями.
Конечно работает, его-же исправили. Прочитайте предыдущий комент.

[@ukko]

Отличная идея, но кривоватая реализация…

Вот допилить бы этот плагин чуть-чуть, я бы стал им пользоваться.

[@woweb]

«кривоватая реализация» — пустые слова, сделанные на основе надуманных замечаний. Кто же вам мешает дописать его «чуть-чуть» под себя?

[@tenshi]

лучше поставить в ряд несколько инпутов и стилизовать их под один

[@Grayscale]

Слишком большой код получится, особенно если например это страница регистрации, где форм не одна и не три, а предположим 10. Да и в css придется добавить отлично строчек. Собственно как говорится «овчинка выделки не стоит», легче довести до ума этот вариант.

[@woweb]

По современным меркам +1кб кода никак нельзя считать слишком большим. На хабре страницы с комментариями пару метров весить могут и ничего, смотрите их без проблем, а 1 ну пусть 2кб кода сделали для вас проблему… Кстати не забываем что CSS кешируется браузером если в файл вынесено.

[@woweb]

Ну если посудить то 99% всего что создается нового — это копия.

[@flymio]

Ну а причем тогда копия? Это лишь «очередная реализация» на jQuery и не более того.
Я думаю если слово «копия» заменить на «очередная реализация» и убрать «Нуну...», то минусов не было бы так много)

[@malicious]

А не сразу это как?

[@malicious]

ть… Я серьёзно.

[@Alexus]

для даты — совершенно неочевидно, где месяц, а где день.
Лучше приводить более информативные примеры, например, 25/12/2008; для ID: 12-1234567 — сразу понятно, по крайней мере, сколько там должно быть цифр, и глаза не разбегаются от обилия одинаковых знаков.
Ну и проверять известные ограничения сразу после ввода, об этом уже писали.

[@w3coder]

спасибо за наводку!

[@gen4ik]

Спасибо. Вщято на замтку.
ПОсле доработки получитса отличный тул.

[@meritt]

Копирование и вставка не работает в полях.

[@bO_oblik]

Странно, но у меня отлично работает.

[@meritt]

Проверил в Firefox 3 (Mac), в нем все рабоатет. А вот в Safari 3.1.2 (Mac) не работает.

[@mas]

Идея плохая. Если вы даёте пользователю жёстую форму ввода, то тем самым вы сильно осложняете ему жизнь за счёт облегчения жизни программистам. Зачем вводить месяц 08, когда можно 8? Зачем заставлять вводить или даже видеть минусы? Почему косые, когда пользователь привык точки? Почему, наконец, не давать пользователю вводить поля через ^V или другим автоматическим способом? И т.д. и т.п. НЕУДОБНО человеку подстраиваться под машину и думать над КАЖДЫМ символом. Казалось бы, вы делаете это максимально дружественным способом, но всё равно плохо: должен я сам вводить разделители или нет? Будет ли работать BkSp? Грубо говоря, это новый control element с неизвестным поведением и вы предлагаете пользователю вместо простого ввода заняться исследованием поведения этого элемента.

Просто скажите пользователю, какие данные вы от него ждёте (напрмер, дд.мм.гггг) и примите ввод от него. А дальше используйте всю мощь программистов, чтобы распознать введенное и подсказать (сразу же! после ввода, т.е. при потере полем фокуса) что не так, если есть ошибка или неясность. Но не надо мешать пользователю ввести простое текстое поле. Это уже атомарная единица ввода. А когда пользователь успешно ввёл поле, то тут вы вполне можете его красиво отформатировать, раскрасить, всё что угодно. Пользователю будет приятно, как его хорошо поняла машина и как они вдвоём так быстро и удобно ввели такие красивые данные.

[@BisnoyZakat]

Как на деле оказалось — не супер-юзабильные…

[@homm]

Очень позоже на дельфовый MaskEdit.

Нашел минус у реализции: стрелки курсора срабатывают при нажатии только один раз, т.е. onkeypress не происходт, пока нажата клавиша. (Опера 9.52)

[@besisland]

Это не дельфовый, это виндовый. Из Common Controls.

[@woweb]

может вы не знаете, но опера содержит немало багов, поэтому если в ней что-то не работает а в остальных работает, это не проблема скрипта…

[@homm]

Может вы не знаете, любой драузер содержит столько багов, шописец, и даже в вашем любимом браузере (мозилла, наверное), и никуда от этого не деться, под всех подстраиваться нужно и исправлять.

Конкретно по этому примереу, видимо, (это мое предположение) сделано так, что-бы работало в эксплорере, а вксплорере keypress который по идее должен приходить на такие случаи нажатия не работает правильно, приходится перевешивать на keydown. А опера в тоже время верно работает с событиями и посылает keydown только один раз когда он действительно происходит. Фаерфокс в этом вопросе прогибается под эксплорер и шлет keydown так же часто.

[@kr1z]

Очень даже не плохо, видел много реализаций данного вопроса…
но пока идеала не нашел.

Ну как говориться, — не под всех же подстраиваться!

[@besisland]

Вот ведь какая незадача — я не смогу ввести телефон [phone] или (0642) 12-8500.

[@woweb]

настрой шаблон под себя и сможешь ввести… это ПРИМЕР работы.

[@besisland]

И какой же должен быть шаблон, чтобы он позволял вводить все нижеперечисленные примеры?
[phone]
[phone]
(96) 123-45-67
[phone]
[phone]
(06424) 5-12-22

[@zt50]

вот минусуют человека, а примеров не дают — странно

[@besisland]

Минусовать проще.

[@Timuraz]

Вот за что вас, интересно, заминусовали? Просто за мнение: о)
Один из фундаментальных принципов юзабилити гласит, что телефоны, например, надо давать вводить в свободной форме. Вы совершенно правы.

[@bO_oblik]

Так никто Вас не заставляет применять этот скрипт к форме, если номера не входят в определенные рамки.

[@Timuraz]

да сам по себе скрипт интересный, но ненужный, увы. Нельзя так над пользователями издеваться.

[@besisland]

Он применим в ситуациях, когда вводимые данные жёстко укладываются в строгий формат, не допускающий вариаций. Таких данных очень мало, и их применение ограничено узким кругом предметных областей.

[@Timuraz]

Полностью с вами согласен.

[@romychs]

Очень просто, шаблона в данном случае не нужно. Из всего, что ввел пользователь, оставим только цифры, ну и плюс, если он есть вначале. Такой номер и храним, понятно, что не видно будет кода страны или города, простым способом, без справочника, их не выделить. Главное, чтоб такой номер можно было набрать на клавиатуре телефона и попасть куда нужно. Зачем жесткий формат для номера? Для целей биллинга скобки и черточки не нужны. Чтоб выделить и определить код города? Они, как показала жизнь, имеют обыкновение меняться. Выходит, что только для того, чтоб лучше запомнить, но если это нужно, человек может сам для себя мысленно расставить черточки, но как правило, когда кто-то заполняет web-форму, потом это хранится в некой БД, из которой тот, кому это нужно инфу извлекает и видя ее на экране набирает на телефоне.

[@besisland]

Для вывода на экран или печати, например, — тогда обязательно нужно разделять номер.

[@besisland]

И — даже к такому варианту (только цифры и, возможно, плюс в начале) не применим masked input.

[@demitsuri]

>[phone]

К сожалению, немалая часть обывателей набирают этот номер, как [phone], а средствами данного решения проверка валидности номера неосуществима.

[@besisland]

Осуществима, если хранить список телефонных кодов.

[@demitsuri]

Спасибо за ссылку, очень полезная вещь. Но главная проблема тут, что номер, начинающийся на +881 тоже может быть валидным (с небольшой вероятностью, конечно).

А вы сталкивались с информацией по длинам телефонных номеров в зависимости от страны? В свое время очень нужно было, искал, но ничего вразумительного не нашел.

[@besisland]

Номер на +881, после которого идёт пробел и/или скобочка, может; а на +8 — нет. Всё просто.

С информацией по длинам номеров не сталкивался.

[@woto]

Вы мне открыли глаза! Я думал телефоны в международном формате всегда десятизначные

[@rubyrabbit]

Ну как, кто-нибудь реализовал свои доработки этого скрипта?
Может быть выложить в Google Code или другое хранилище?
Было бы интересно взглянуть, и может быть тоже приложить руку.
Просто не хочется делать ещё раз то, что уже сделали другие.

Автору скрипта и автору статьи — спасибо.

[@malicious]

Ну так воложите.

[@rubyrabbit]

Если внесу изменения — обязательно выложу.

[@bO_oblik]

Мне тоже будет интересно посмотреть.

[@nekt]

Я бы предпочел исправлять ввод пользователя автоматически вместо того чтобы заставлять его придерживаться какого-либо формата.

[@akzhan]

jQuery UI datepicker — решение для дат.
marcgrabanski.com/pages/code/jquery-ui-datepicker

[@kr1z]

это немного не то, ввод правильного формата на основе дополнительных диалогов это и слону понятно, что легче реализовать.

[@Joric]

А писать надо всё равно «юзабЕльные».

[@bO_oblik]

Блин, мне всегда поразному советуют, можно ссылочку на какой-нибудь авторитетный источник?

Спасибо!

[@pavelkornev]

а вот аналог под Mootools — zendold.lojcomm.com.br/imask/

если кликнуть не в начале формы, глюков нет… enjoy))

[@RuslanDenisenko]

Как раз тока недавно столкнулся с такой необходимостью, прикрутил удобно работает!
Свое предназначение выполняет!

[@TeAnton]

Ненавижу такие формы. Все вермя чертыхаюсь, когда приходиться заполнять их. Самый главный недостаток, то что copy-paste не работает.

Я считаю самый верный вариант, это проверять введенные данные при уходи фокуса с контрола, и подсвечивать каким-нибудь образом контрл с невалидными данными. Конрл должен понимать как можно больше форматов. Телефоны с черточками и скобками, с точками и пробелами. Даты с точками и слешами, а в идеале должен понимать названия месяцев.

[@sanept]

исправьте адрес к RSS feeds.feedburner.com/chernev/

[@bO_oblik]

Спасибо большое, досадная ошибка.

Поправил.

[@CurlyBrace]

Когда вам уже надоест выдавать чужие статьи за свои и пиарить свой бложек на Хабре?

Для переводов есть вид топика «Перевод», для ссылки на свой сайт — собственный профиль.

[@bO_oblik]

Эм, а где тут, собственно, перевод?

Это самый обыкновенный обзор скрипта.

А когда Вам уже надоест ныть по этому поводу?

[@CurlyBrace]

«Ныть» мне надоест когда вы перестанете страдать херней. Не надо рассказывать мне про «самый обыкновенный обзор скрипта», чай не маленький уже. Или вы всех вокруг себя за дураков держите?

[@bO_oblik]

Я Вас не буду убеждать.

За дурака на данный момент я держу только Вас. Ваше нытье и анонимные минусы Вам чести не делают.
Кроме того, не вашему «высоко авторитетному» мнению мне слушаться, другие пользователи сделали свой выбор, а Вы лишь один из этих пользователей, у которого от кармы немного съехала крыша.

Дальнейшую переписку прошу Вас перенести в icq или личные сообщения. Иначе я просто буду Вас игнорировать.

[@hlomzik]

Минусы отнюдь не анонимные, вы не заметили? ;) Мы о них даже отзываемся, цените.

Хабраобщество уже однажды плюнуло в вас — вы ссылку на свой бложек стали обрамлять неким текстом. Но ничего по сути не изменилось.

Ваши посты в основном — маленькие решеньица с минимальной пользой. Им подобные можно пачками находить на ресурсах по Wordpress и jQuery. Большой у вас там еще архив невысказанного? Может, закрытки в специализированных блогах всех спасут?
Хабр уже не тот, и вы для этого стараетесь особенно…

[@Dromok]

Почему так наехали на человека? Мне статья показалась интересной. Вот ради подобных статей я и посещаю хабр. Скрипт планирую использовать на одном из своих следующих проектов, как раз нужна такая реализация.

[@CurlyBrace]

Спасибо, посмеялся.

[@hellohaos]

а как быть с необязательными параметрами, или например чтоб число от 3 до 7?

а замечания по поводу «неверно введена дата» как по мне так не уместны, потому что скрипт решает проблему ввода данных по формату, а не корректность ввода, пусть потом функция проверят правильно ли все ввели.

[@mace]

То же под ASP.Net:
www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx

[@ZDN]

А я вот просто скажу большое человеческое спасибо!

Мы не гуру веб технологий — потихоньку осваиваемся, в том числе и на таких примерах! Будет полезно при регистрации новых команд!

[@andead]

неплоха бы для prototype что то похожее увидеть

[@easterism]

Еще один аналог
jsfromhell.com/en/forms/masked-input/example

[@informix]

А мне понравилось!

[@burunduk2]

вялiкi дзякуй

[@ivanezko]

«И так,» пишется слитно, поправьте пожалуйста.

[@LoneCat]

А «итак» может писаться и так, и этак: P