Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 71
Следующий логичный шаг этого плагина — валидация количества введённых символов.
Например:
от 3 до 12 символов — ок.
если поле теряет фокус, и в нём менее трёх или более двенадцати символов — то мы получаем красную рамку. Или любой другой способ показать, что случился факап.
Например:
от 3 до 12 символов — ок.
если поле теряет фокус, и в нём менее трёх или более двенадцати символов — то мы получаем красную рамку. Или любой другой способ показать, что случился факап.
Решил сэкономить драгоценные килобайты трафика посетителей.
Изначально, при написании скрипта имена ключей были трёхметровые, но ясно описывающие их предназначение. В процессе сжатия скрипта решил их урезать. А разные имена ключей для несжатого и сжатого кода — это совсем жутко. Поэтому и решил оставить коротенькие имена.
Рад, что работа проделана не зря )
Изначально, при написании скрипта имена ключей были трёхметровые, но ясно описывающие их предназначение. В процессе сжатия скрипта решил их урезать. А разные имена ключей для несжатого и сжатого кода — это совсем жутко. Поэтому и решил оставить коротенькие имена.
Рад, что работа проделана не зря )
А мне понравилось, побольше бы именно таких «великов» :)
За 1кб — респект.
За 1кб — респект.
Это, конечно, мое субъективное мнение, но мне старый вариант (с подсказкой под полем) на картинке нравиться больше.
К тому же такое внутреннее восприятие дополняется мыслями о том, что пользователь должен запоминать подсказки до введения значения в поле.
Это никак не критика данного подхода к подсказке. Просто не всегда ее применение удачно.
К тому же такое внутреннее восприятие дополняется мыслями о том, что пользователь должен запоминать подсказки до введения значения в поле.
Это никак не критика данного подхода к подсказке. Просто не всегда ее применение удачно.
Кстати, этот недостаток частично можно убрать, если сделать так в поле поиска хабра: к тегу input добавить атрибут title: ( title=«поиск по сайту» )
Изначально скрипт я писал для такой формы:
Это форма авторизации пользователя на сайте. Без лишних кнопок и надписей. Если пользователь хочет авторизоваться: жмёт на поле логин, вводит его, клацает Tab, вводит пароль… если замечает, что логин введён не верно(опечатался например) или ему выскочило окно предупреждения о неверном логине, жмякает опять Tab, что возвращает его в поле логина. Мне кажется будет удобно.
Но вообще наверное соглашусь, что в некоторых случаях удобнее подсказки под полем делать. Да и на вкус и цвет… В любом случае всегда аудитория разделится на 2 фронта =)
Это форма авторизации пользователя на сайте. Без лишних кнопок и надписей. Если пользователь хочет авторизоваться: жмёт на поле логин, вводит его, клацает Tab, вводит пароль… если замечает, что логин введён не верно(опечатался например) или ему выскочило окно предупреждения о неверном логине, жмякает опять Tab, что возвращает его в поле логина. Мне кажется будет удобно.
Но вообще наверное соглашусь, что в некоторых случаях удобнее подсказки под полем делать. Да и на вкус и цвет… В любом случае всегда аудитория разделится на 2 фронта =)
Ну просто имейте в виду, что отсутствием хотя бы мааленькой кнопочки Вы как минимум отсекаете всех, кто сидит с мобильных телефонов/устройств (> 7.5% у opera mini). Ну и тех людей, кто не догадается enter нажать, тут статистикой сразить не могу, данных не имею.
Удобства отсутствие кнопочки не добавляет никакого, задача вписать небольшую кнопку в форму, чтоб смотрелось хорошо — ни капли не сложная с точки зрения дизайна (гляньте, как круто это на хабре сделано).
Короче говоря, уверен, что конкретно этот тренд в упрощении дизайна — ошибочный.
Удобства отсутствие кнопочки не добавляет никакого, задача вписать небольшую кнопку в форму, чтоб смотрелось хорошо — ни капли не сложная с точки зрения дизайна (гляньте, как круто это на хабре сделано).
Короче говоря, уверен, что конкретно этот тренд в упрощении дизайна — ошибочный.
Есть кое-что, что вы не учли. Это автозаполнение формы.
В примере без скрипта, формы автоматически заполняются браузером. В примере со скриптом тоже заполняются, но их перекрывает див.
Есть вариант проверять значения полей по таймеру и убирать подсказки, когда поля заполнятся.
По таймеру, потому что заполнение полей происходит после выполнения скрипта, а когда именно — хз.
В примере без скрипта, формы автоматически заполняются браузером. В примере со скриптом тоже заполняются, но их перекрывает див.
Есть вариант проверять значения полей по таймеру и убирать подсказки, когда поля заполнятся.
По таймеру, потому что заполнение полей происходит после выполнения скрипта, а когда именно — хз.
А есть вариант добавить атрибут autocomplete=«off» (если я в той теме)
Тогда вводить логин-пасс ручками…
Я привел этот способ как вариант. Ведь есть же случаи, когда автозаполнение и не нужно.
Например, подсказка "Название статьи"
Например, подсказка "Название статьи"
Тоже спорно.
Допустим, я ввел все поля, в том числе и название статьи. Нажал на сабмит, и тут вылезла страшная бяка. Ну например у меня недостаточно прав на эту операцию. В следующий раз, когда у меня уже будут права, я могу просто выбрать из выпавшего списка нужное название.
Я за автозаполнение везде, кроме поля поиска с suggestions.
К тому же autocomplete=«off» не проходит валидацию :)
Допустим, я ввел все поля, в том числе и название статьи. Нажал на сабмит, и тут вылезла страшная бяка. Ну например у меня недостаточно прав на эту операцию. В следующий раз, когда у меня уже будут права, я могу просто выбрать из выпавшего списка нужное название.
Я за автозаполнение везде, кроме поля поиска с suggestions.
К тому же autocomplete=«off» не проходит валидацию :)
Хм-м-м… Действительно упустил этот момент. Я просто автозаполнением не пользуюсь, поэтому даже как-то и не задумался. Спасибо за подсказку. Завтра на свежую голову попробую поправить и выложу версию скрипта умеющую работать с автозаполнением.
Кажется научил скрипт адекватно реагировать на автозаполнение…
Спасибо за проделанную работу. Надеюсь, на этом не остановишься.
Например, было бы здорово указывать класс контейнера подсказки. Чтобы он искал .next('.help') к примеру, и если такого соседа нету, то оставлять инпут в изначальном состоянии. А то сейчас невозможно добавить такие подсказки выборочно лишь для некоторых инпутов.
А вообще, если бы я делал для себя, я бы еще запихал в конфиг название евента (или евентов), который бы следовало прослушивать у инпута, и по которому копировать классы. Т.е. если параллельно работает валидатор и он отлавливает ошибку в поле, то делает всю работу по визуализации ошибки, а потом файерит евент «afterInputError». Вот его то и отлавливает наш helpInput и копирует классы у изменившегося инпута… Но это если бы я делал для себя :))) А так классный плагин.
Ну и, конечно, невнятные ключи конфига — это, как уже писали выше, очень плохо.
Например, было бы здорово указывать класс контейнера подсказки. Чтобы он искал .next('.help') к примеру, и если такого соседа нету, то оставлять инпут в изначальном состоянии. А то сейчас невозможно добавить такие подсказки выборочно лишь для некоторых инпутов.
А вообще, если бы я делал для себя, я бы еще запихал в конфиг название евента (или евентов), который бы следовало прослушивать у инпута, и по которому копировать классы. Т.е. если параллельно работает валидатор и он отлавливает ошибку в поле, то делает всю работу по визуализации ошибки, а потом файерит евент «afterInputError». Вот его то и отлавливает наш helpInput и копирует классы у изменившегося инпута… Но это если бы я делал для себя :))) А так классный плагин.
Ну и, конечно, невнятные ключи конфига — это, как уже писали выше, очень плохо.
1. Автозаполнение — 2. Согласен с jamayka хочется event
3. Дурацкий старый способ onfocus=«if(this.value == 'имя') this.value = ''»; onblur=«if(this.value == '') this.value = 'имя';» работает, так что нужно делать валидацию как не крути.
Ждем продолжения!
3. Дурацкий старый способ onfocus=«if(this.value == 'имя') this.value = ''»; onblur=«if(this.value == '') this.value = 'имя';» работает, так что нужно делать валидацию как не крути.
Ждем продолжения!
Вы сделали плохую форму. Зачем озадачивать пользователя, который видит что в _его_ поля ввода уже что-то введено? Он захочет узнать, что ж там написали, а там светло-серое, видно плохо. Снова раздражение.
Поле ввода должно быть пустым. Так оно и быстрее считается, и никаких вопросов у пользователя не возникнет. А в вашем случае вместо того, чтобы привычно вбить логин-пароль в узнаваемую краем глаза форму, он два раза спотыкнётся на ней.
Поле ввода должно быть пустым. Так оно и быстрее считается, и никаких вопросов у пользователя не возникнет. А в вашем случае вместо того, чтобы привычно вбить логин-пароль в узнаваемую краем глаза форму, он два раза спотыкнётся на ней.
Перемотайте эту страницу наверх — вы увидите форму поиска с серенькой надписью.
Откройте главную страницу Яндекса — форма логина с серыми надписями.
Откройте новую вкладку в файерфоксе или в сафари — в строке адреса серенькая надпись.
Они везде, и это уже привычно.
Откройте главную страницу Яндекса — форма логина с серыми надписями.
Откройте новую вкладку в файерфоксе или в сафари — в строке адреса серенькая надпись.
Они везде, и это уже привычно.
Да, есть только одна особенность: во всех перечисленных вами случаях серый текст в поле ввода служит маркером, указывающим на предназначение этого поля, а не на его специфические свойства. После клика по полю информационная ценность маркера уже исчерпана, его функция гарантированно выполнена (свидетельство тому — клик по полю).
В данном же случае это совсем не очевидно.
В данном же случае это совсем не очевидно.
Спасибо, вы прям моими словами ответили, мне остается только поддакнуть =)
Ладно согласен — плохой пример в демонстрации хорошего плагина. :)
Да, пример действительно привёл не удачный. На самом деле писал плагин, чтобы указывать подсказками что надо вводить в поля, а не как. А в примере не подумал и сделал наоборот. Надеюсь разработчики сами определятся что им надо от плагина =)
Делал подобное для textarea, только без jQuery (с ним бы кода получилось в разы меньше) и с валидацией.
Полезная штука при критичности количества символов.
Полезная штука при критичности количества символов.
На днях писал плагин с похожей функциональностью, но с чуть меньшим количеством возможностей. Спасибо за проделанную работу и идеи.
Вы уж простите, но это тот случай, когда работает это правило. Налицо чрезмерное упрощение, от которого больше вреда, чем пользы.
Это смотря как применять.
Если это страница регистрации, то форма является основным элементом — тут, согласен, экономия места на пояснениях абсолютно ни к чему. Главное, чтобы информация была усвоена на сто процентов.
Если же страница посвящена чему-то другому, а форма — лишь второстепенный элемент предназначенный для уменьшения кликов, то такая экономия вполне оправдана. Формы авторизации, поиска, подписки и т.п.
Если это страница регистрации, то форма является основным элементом — тут, согласен, экономия места на пояснениях абсолютно ни к чему. Главное, чтобы информация была усвоена на сто процентов.
Если же страница посвящена чему-то другому, а форма — лишь второстепенный элемент предназначенный для уменьшения кликов, то такая экономия вполне оправдана. Формы авторизации, поиска, подписки и т.п.
Собственно, я против этого ничего не имею. Я в основном отвлекся на то, что приведено автором в качестве примера. Короче, тыкать такие подсказки во все поля подряд нехорошо :)
Видел похожую реализацию с использованием тега Label, который с помощью css сдвигался на поле ввода. Плюс js, конечно, куда уж без него. В принципе, раализация хорошая, но нужно продумать ситуацию, когда при неверном вводе нужно показать также и ошибку.
без функции валидации этот велосепед без колёс
что мешало «var obj = jQuery(i)» заменить на «var obj = this»? :)
в целом — велосипед, не заслуживающий быть в блоге jquery
в целом — велосипед, не заслуживающий быть в блоге jquery
возникла задача оформить на одном проекте мини-подсказки в полях input (подобно тому, как оформлено поле «поиск по сайту», которое вы можете увидеть в правом верхнем углу Хабры)
На Хабре не «подсказки», а label для поля, который для компактности помещен в само поле. У вас же что-то другое.
www.alistapart.com/articles/makingcompactformsmoreaccessible
типа
<form method="post"> <div > <input name="searchword" maxlength="20" alt="найти" type="text" size="13" value="поиск..." onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';" /> <button value="найти" name="Submit" type="submit">найти</button> </div>
Не юзабельно как-то… В случае с хабром это лэйбл к одиноко стоящему полю. Посмотрел, понял, что это за поле, ввёл текст, нажал энтер.
А вот в случае с требуемой длинной — дело сложнее. Придётся запоминать 2 цифры, тыкать в поле и вводить. Часто возникает желание подглядеть сколько же надо символов, достаточно ли?
Велосипед конечно приятный, но валидацию к нему точно не надо.
А вот в случае с требуемой длинной — дело сложнее. Придётся запоминать 2 цифры, тыкать в поле и вводить. Часто возникает желание подглядеть сколько же надо символов, достаточно ли?
Велосипед конечно приятный, но валидацию к нему точно не надо.
Могу быть немного не в теме, но вроде бы вот это elv1s.habrahabr.ru/blog/74363/ (там про атрибут placeholder) как раз пересекается с функционалом, представленном в данном топике.
Не работает Shift+Tab, я например часто им пользуюсь… незнаю как другие…
Да, согласен, пример не удачно подобрал. Вот например на Хабре подсказка «поиск по сайту» — весьма удобно и не обязательно чтобы надпись была всегда видна.
А кстати бывает ещё круче, когда о том какие символы допустимы при вводе и какое ограничение по длине пользователь узнаёт только после отправленной формы.
А кстати бывает ещё круче, когда о том какие символы допустимы при вводе и какое ограничение по длине пользователь узнаёт только после отправленной формы.
вот тут случайно нашелся «аналог» вашего велосипеда.
InputLabel jQuery Plugin
InputLabel jQuery Plugin
Нашел еще один аналог. Крутите вниз страницы там про абсолютное позиционирование лейблов с красивым эффектом прозрачности при фокусе.
www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
Спасибо. Использовал у себя на сайте. А можно, чтобы после использования формы при переходе на новую страницу фокус не устанавливался в поле автоматически?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Плагин helpInput (мой велосипед)