На этом шаге мы отредактируем приведенный пример.
Мы получили замечательный эффект, но здесь есть пара проблем:
Рис.1.Текст подписи перекрывает текст в поле ввода
Во избежание первой проблемы следует скрывать текст подписи в момент, когда поле ввода получает фокус, и отображать его снова, когда поле теряет фокус, при условии, что в поле отсутствует текст, введенный пользователем.
Скрыть подпись в момент получения полем фокуса ввода достаточно просто:
$(document).ready(function() { var $search = $('#search').addClass('overlabel'); var $searchInput = $search.find('input'); var $searchLabel = $search.find('label'); $searchInput .focus(function() { $searchLabel.hide(); }) .blur(function() { if (this.value == '') { $searchLabel.show(); } }); });
Теперь подпись скрывается, как только пользователь начинает вводить текст в поле.
Вторая проблема также решается достаточно просто. Мы можем одновременно скрывать текст подписи и предоставлять пользователю доступ к полю, возбуждая в обработчике события click подписи событие focus элемента ввода:
$(document).ready(function() { var $search = $('#search').addClass('overlabel'); var $searchInput = $search.find('input'); var $searchLabel = $search.find('label'); $searchInput .focus(function() { $searchLabel.hide(); }) .blur(function() { if (this.value == '') { $searchLabel.show(); } }); $searchLabel.click(function() { $searchInput.trigger('focus'); }); });
Наконец, нам необходимо обработать ситуацию, когда текст остается в поле ввода при обновлении страницы, подобную ситуации при реализации проверки условно-обязательных полей ввода. Если поле ввода имеет некоторое значение, подпись не отображается:
$(document).ready(function() { var $search = $('#search').addClass('overlabel'); var $searchInput = $search.find('input'); var $searchLabel = $search.find('label'); if ($searchInput.val()) { $searchLabel.hide(); } $searchInput .focus(function() { $searchLabel.hide(); }) .blur(function() { if (this.value == '') { $searchLabel.show(); } }); $searchLabel.click(function() { $searchInput.trigger('focus'); }); });
Результат работы приложения приведен на рисунке 1.
Рис.1. Окончательная версия
На следующем шаге мы рассмотрим функцию автодополнения на основе технологии AJAX.