Здравствуйте. На днях возникла задача оформить на одном проекте мини-подсказки в полях input(подобно тому, как оформлено поле «поиск по сайту», которое вы можете увидеть в правом верхнем углу Хабры). Проект, на котором надо было оформить поля, написан с использованием jQuery, поэтому решил воспользоваться плагином для этой библиотеки. Пробежался по уже готовым решениям и не нашёл полностью устраивающее меня. Решил мастерить свой велосипед. На мой взгляд, получилось неплохо, хотя в процессе разработки не раз натыкался на подводные камни. Из-за скудного выбора плагинов, решающих эту задачу, я и решил выложить своё «творение» на Хабру. Необходимость в оформлении полей подобным образом встречается часто, авось кому-нибудь и пригодится.UPD: В ходе обсуждений было предложено пару дельных идей, которые я и реализовал:
1. Обрабатывается не только Tab, но и Shift+Tab
2. Плагин научился работать с автозаполнением (если надо отключить эту возможность — при инициализации установите в значение false ключ autoComplete)
3. Изменились имена ключей(приобрели смысловую нагрузку понятную не только мне)
Перед тем как пичкать вас исходниками, расскажу о достоинствах плагина:
1. Даже если у посетителя отключен js, подсказки будут видны и дизайн не «поедет»(на рисуночке видно как работает с отключенным и включенным js).
2. Плагин умеет обрабатывать нажатие кнопки Tab(теперь и Shift+Tab). Курсор будет переходить к объекту со следующим tabindex, а достигнув последнего объекта, курсор перепрыгнет на первый (в моём случае это было одним из главных условий)
3. Подсказочки корректно работают с полями типа password (есть плагины, которые точками выводят текст).
4. Плагин умеет «обходить» скрытые поля (зачастую часть полей скрыта от пользователя и появляется только при определённых условиях)
5. За счёт присваиваемых объектам классов можно гибко менять визуальное оформление.
6. Плагин получился лёгенький, всего 1кб.
Тут сам скрипт плагина:
— jquery.helpInput.js
Ключи параметров, которые можно передать в плагин:
— 'autoComplete' — поддержка автозаполнения полей
— 'dummyClass' — класс тега-муляжа, который перекрывает input (по умолчанию: 'divInput' )
— 'selectedTextFileClass' — класс выделенного объекта типа text или password (по умолчанию: 'selectedInput' )
— 'selectedAnotherFileClass' — класс выделенного объекта иного типа (по умолчанию: 'selectedAnother' )
Принцип работы плагина не сложно понять по коду, но для тех, кому лень заглядывать в код вкратце расскажу:
1. В форме всем input и textarea элементам необходимо прописать tabindex(задаёт последовательность прыжком курсора по нажатию на кнопку Tab).
2. Задать элементам класс, описывающий внешний вид.
3. Под элементами формы типа text и password надо разместить текст подсказочек, обрамлённый любым тегом.
Должно получиться что-то типа:
<input type="text" name="login" tabindex="1" class="input" />
<div class="help">от 3 до 12 символов</div>
4. Инициализировать плагин:
$("form").helpInput();
Вот собственно и всё. Не стесняйтесь высказывать предложения по улучшению и описывать баги. Надеюсь не зря оформлял статью и кому-нибудь она пригодится.
