Blog. Just Blog

Поле ввода с убирающейся подсказкой

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:
  1. <label for="search">Поиск по сайту:</label>
  2. <input type="text" name="search" id="search" value="что ищем?"
  3.        onfocus="if(this.value==this.defaultValue){this.value='';}"
  4.        onblur="if(this.value==''){this.value=this.defaultValue;}">
Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

Поскольку минусы предыдущего способа перевешивают плюсы, то я взял и написал свой вариант, лишенный практически всех перечисленных недостатков. К минусам можно записать только громоздкий код, но в остальном все получилось просто замечательно. Основной HTML-код очень похож на классический вариант, за исключением нескольких дополнительных тегов, стилей и атрибутов:
  1. <div class="smart_input">
  2.   <label for="login" id="login_tooltip">логин</label>
  3.   <input type="text" name="login" id="login" onfocus="hideTT(this);"
  4.          onblur="chkTT(this);">
  5. </div>
  6.  
  7. <div class="smart_input">
  8.   <label for="passw" id="passw_tooltip">пароль</label>
  9.   <input type="password" name="passw" id="passw" onfocus="hideTT(this);"
  10.          onblur="chkTT(this);">
  11. </div>
Главная особенность формирования кода: ID подсказки должен начинаться со строки ID поля, к которому она относится, с дописанной в конец строкой "_tooltip". Стили для этого кода можно включить в текст страницы или вынести в отдельный CSS-файл:
  1. <style type="text/css">
  2.   .smart_input {
  3.     positionrelative;
  4.     vertical-aligntop;
  5.   }
  6.   .smart_input label {
  7.     positionabsolute;
  8.     top0px;
  9.     left5px;
  10.     displaynone;
  11.     cursortext;
  12.     font-size16px;
  13.     font-familyArial;
  14.     color#AAAAAA;
  15.   }
  16. </style>
Родительский div имеет атрибут relative, это позволяет позиционировать плавающий элемент с атрибутом absolute внутри него. В описании стилей вы можете выставить любой шрифт, цвет и размер подсказки. Первоначально подсказки имеют атрибут отображения "скрытый", это необходимо, чтобы поддерживать работоспособность метода при отключенных скриптах. Теперь добавляем интерактивность при помощи JavaScript:
  1. <script type="text/javascript">
  2. // Проверка заполнения поля
  3. function chkTT(e) {
  4.   if (typeof(e)=='string') { e=document.getElementById(e); }
  5.   if (!e) { return false; }
  6.   document.getElementById(e.id+'_tooltip').style.display =
  7.    (e.value==''?'inline':'none');
  8. }
  9. // Спрятать подсказку
  10. function hideTT(e) {
  11.   if (typeof(e)=='string') { e=document.getElementById(e); }
  12.   if (!e) { return false; }
  13.   document.getElementById(e.id+'_tooltip').style.display='none';
  14. }
  15. </script>
При получении фокуса полем ввода подсказка скрывается. При потере полем фокуса, управление передается обработчику, проверяется его содержимое, и, если оно не пустое, то стиль подсказки устанавливается скрытым, в противном случае подсказка отображается. Эта же функция используется для начальной инициализации всех подсказок:
  1. <script type="text/javascript">
  2. // Показать подсказки в полях ввода
  3. chkTT('login');
  4. chkTT('passw');
  5. </script>
Функции инициализации должны вызываться после загрузки страницы, в качестве параметров передаются ID полей ввода, к которым добавляются подсказки. Способ протестирован и успешно работает в браузерах Internet Explorer 6-8, Firefox 2.x-3.x, Opera 8-10, Safari и Google Chrome. Рабочий пример описанных в статье способов вы можете посмотреть у меня на сайте.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 15756 | Комментариев: 19

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Сергей (22.08.2015 в 01:49):
Спасибо, нашел маленький, но очень нужный скрипт - респект автору!!!
ManHunter (13.08.2014 в 11:00):
О да, точно. Камменты читать не обязательно, надо сразу же блеснуть знаниями.
Сделай-ка мне плейсхолдер красного цвета в поле password.
Terry_Foster (13.08.2014 в 10:41):
время прошло и теперь для этих целей есть placeholder :)

placeholder
Вадим (05.11.2013 в 17:23):
Спасибо за хорошее объяснение!
Елена (10.10.2011 в 16:29):
lesnykh Ilja, Прошу прощения, placeholder не валидный, Надеюсь этот вариант поможет в решении моих "тараканов"
Temiko (28.06.2011 в 10:59):
Благодарю за оперативный ответ! Теперь знаю в какую сторону копать )
ManHunter (28.06.2011 в 10:21):
Никак. Браузер заполняет поля без генерации событий. Или запускать chkTT для всех полей по таймеру после полной загрузки страницы.
Temiko (28.06.2011 в 10:17):
Отличный способ, всё работает, спасибо большое!
Только есть один нюанс: когда браузер автоматически подставляет в поля сохранённые логин и пароль, то проверка не срабатывает, и подсказка не исчезает.
Подскажите, пожалуйста, как это поправить? С примером кода, желательно, т.к. сам плохо в нём разбираюсь.
hedgehog (17.03.2011 в 11:55):
Класс!
Очень полезно, все шикарно работает!
Респект!
Bolirina (14.03.2011 в 21:22):
Спасибо за функцию, только вопрос есть: "Функции инициализации должны вызываться после загрузки страницы" - это означает что эту функцию надо поместить на странице прямо перед закрывающим тегом </body>? Я вставляла ее после дивов и у меня при начальной загрузке никак подсказка не появляется...
ManHunter (22.11.2010 в 18:39):
Серьезно? Лучше пользоваться головным мозгом. Мой способ работает везде, а твой placeholder поддерживается только в Safari 5, Chrome 6, Firefox 4, визуально никак не настраивается и не работает в полях типа password.
lesnykh Ilja (22.11.2010 в 18:29):
лучше пользоваться аттрибутом html5 - placeholder
skul (12.10.2010 в 01:51):
Дякую, ви дуже допомогли! Привет с Киева :-)
Nigelist (29.09.2010 в 22:03):
Отлично, проверим... :)
ManHunter (27.09.2010 в 21:21):
Ты не поверишь. Поисковый запрос вообще не меняется, стилями меняется только подсказка.
Nigelist (19.09.2010 в 14:25):
А возможно ли во втором скрипте изменять оформление только подсказки, а не самого поискового запроса?
ManHunter (25.04.2010 в 03:20):
Ну можно добавить событие onchange, но тогда придется делать еще дополнительную обработку значения поля, причем весьма громоздкую. Так что оно того не стОит.
Nutscracker (25.04.2010 в 01:34):
Для полного счастья не хватает только очистки текста подсказки при перетаскивании текста. Но с этим, вроде бы, не все так просто. Или нужно тупо убирать подсказку при наведении курсора.
OnlineMan (24.04.2010 в 00:51):
Спасибки! Использовал на своем сайте. Самый первый вариант - посчитал не к чему усложнять такую простую функцию сложными скриптами.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0044 сек.) / Память: 4.5 Mb
Наверх