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

20.04.2010 | Категория: Web-мастеру и не только | Автор: ManHunter

Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:

Code (HTML) : Убрать нумерацию

<label for="search">Поиск по сайту:</label>
<input type="text" name="search" id="search" value="что ищем?"
onfocus="if(this.value==this.defaultValue){this.value='';}"
onblur="if(this.value==''){this.value=this.defaultValue;}">

Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

Поскольку минусы предыдущего способа перевешивают плюсы, то я взял и написал свой вариант, лишенный практически всех перечисленных недостатков. К минусам можно записать только громоздкий код, но в остальном все получилось просто замечательно. Основной HTML-код очень похож на классический вариант, за исключением нескольких дополнительных тегов, стилей и атрибутов:

Code (HTML) : Убрать нумерацию

<div class="smart_input">
<label for="login" id="login_tooltip">логин</label>
<input type="text" name="login" id="login" onfocus="hideTT(this);"
onblur="chkTT(this);">
</div>
<div class="smart_input">
<label for="passw" id="passw_tooltip">пароль</label>
<input type="password" name="passw" id="passw" onfocus="hideTT(this);"
onblur="chkTT(this);">
</div>

Главная особенность формирования кода: ID подсказки должен начинаться со строки ID поля, к которому она относится, с дописанной в конец строкой "_tooltip". Стили для этого кода можно включить в текст страницы или вынести в отдельный CSS-файл:

Code (HTML) : Убрать нумерацию

<style type="text/css">
.smart_input {
position: relative;
vertical-align: top;
}
.smart_input label {
position: absolute;
top: 0px;
left: 5px;
display: none;
cursor: text;
font-size: 16px;
font-family: Arial;
color: #AAAAAA;
}
</style>

Родительский div имеет атрибут relative, это позволяет позиционировать плавающий элемент с атрибутом absolute внутри него. В описании стилей вы можете выставить любой шрифт, цвет и размер подсказки. Первоначально подсказки имеют атрибут отображения "скрытый", это необходимо, чтобы поддерживать работоспособность метода при отключенных скриптах. Теперь добавляем интерактивность при помощи JavaScript:

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
// Проверка заполнения поля
function chkTT(e) {
if (typeof(e)=='string') { e=document.getElementById(e); }
if (!e) { return false; }
document.getElementById(e.id+'_tooltip').style.display =
(e.value==''?'inline':'none');
}
// Спрятать подсказку
function hideTT(e) {
if (typeof(e)=='string') { e=document.getElementById(e); }
if (!e) { return false; }
document.getElementById(e.id+'_tooltip').style.display='none';
}
</script>

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

Code (JavaScript) : Убрать нумерацию

<script type="text/javascript">
// Показать подсказки в полях ввода
chkTT('login');
chkTT('passw');
</script>

Функции инициализации должны вызываться после загрузки страницы, в качестве параметров передаются ID полей ввода, к которым добавляются подсказки. Способ протестирован и успешно работает в браузерах Internet Explorer 6-8, Firefox 2.x-3.x, Opera 8-10, Safari и Google Chrome. Рабочий пример описанных в статье способов вы можете посмотреть у меня на сайте.

Просмотров: 18751 | Комментариев: 19

Метки: JavaScript, CSS, HTML, оформление сайта

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

Отличный способ, всё работает, спасибо большое!
Только есть один нюанс: когда браузер автоматически подставляет в поля сохранённые логин и пароль, то проверка не срабатывает, и подсказка не исчезает.
Подскажите, пожалуйста, как это поправить? С примером кода, желательно, т.к. сам плохо в нём разбираюсь.

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):

Спасибки! Использовал на своем сайте. Самый первый вариант - посчитал не к чему усложнять такую простую функцию сложными скриптами.

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 35,306 раз

Всемирный день почты

День Специальной пожарной охраны МЧС России

День разгрома советскими войсками немецко-фашистских войск в битве за Кавказ

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.1 сек. / MySQL: 2 (0.0062 сек.) / Память: 4.5 Mb

	2024 - ОКТЯБРЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

Комментарии

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