Скрываем/показываем placeholder при фокусе/блюре на поле
Задача: есть поле ввода, например, форма поиска, с атрибутом placeholder "Поиск..." (как добавить placeholder к полю поиска в Drupal 7, читайте тут), нам нужно при клике(активации, или при передаче фокуса полю) скрывать placeholder, и показывать его снова если фокус с поля снят, но не был осуществлен ввод пользовательского текста в поле.
Для реализации данной задачи нам потребуется JQuery. Для этого создаем функцию, предварительно подключив библиотеку JQuery:
$(function(){ function interactive_placeholder(){ var $field = $('#search input[type="text"]'), $placeholder = $field.attr("placeholder"); $field.focus(function(){ if($field.attr("value") == ""){ $field.attr("placeholder", " "); } }) $field.blur(function(){ if($field.attr("value") == ""){ $field.attr("placeholder", $placeholder); } }) } interactive_placeholder(); });
Комментарии к коду:
в строке 3, заносим наше поле в переменную.
в строке 4, заносим атрибут placeholder нашего поля в переменную
в строке 6, создаем обработчик событий "когда фокус на поле"
в строке 7, проверяем пустое ли поле, то есть не был ли туда введен пользовательский текст
в строке 8, сбрасываем текущий placeholder, если поле было пустое
в строке 12, создаем обработчик событий "когда фокус снят с поля"
в строке 13, проверяем пустое ли поле, то есть не был ли туда введен пользовательский текст
в строке 14, если фокус снят, и в поле не была введена пользовательская информация, то возвращаем исходный placeholder
в строке 18, запускаем функцию