Статьи и справочные
материалы

Иногда, в угоду минималистическому дизайну сайта, нужно сделать форму поиска компактнее.

С другой стороны нельзя терять "прозрачности" интерфейса и заставлять пользователя(посетителя) гадать что за поле ввода перед ним. Таким образом, убрав стандартную кнопку "Найти" у формы поиска, нам следует другим образом обозначить поле ввода.

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

Рассмотрим случай когда html-код формы менять нельзя, то есть аттрибуты onfocus, onblur применить не получится, да и кнопку придется убрать с помощью css-правила display:none;. Здесь нам понадобится написать скрипт, добавляющий обработчики событий focus и blur к полю ввода.

Итак, наш примерный html-код формы:

<form>
   <input type="text" id="search-query" />
   <input type="submit" id="search-form-submit" value="Найти" />
</form>

А выглядеть это будет примерно так:

Назначить обработчик события можно, используя метод addEventListener в нормальных браузерах и attachEvent в ИЕ. Таким образом, функция выполняющая необходимую нам операцию будет такой:

function setEventHandler(item, event, handler) {
   if (typeof(item.addEventListener) != 'undefined') {
      item.addEventListener(event, handler, false);
   }else if (typeof(item.attachEvent) != 'undefined') {
      item.attachEvent('on' + event, handler);
   }
}

handler - это функция-обработчик события. Нам понадобятся две - для случаев когда поле ввода активно и нет. Примерно такие:

function searchFieldDefault() {
   if (field.value == '') {
      field.value = 'Поиск';
   }
   field.style.color = '#B9B9B9';
}
function searchFieldActive() {
   if (field.value == 'Поиск') {
      field.value = '';
   }
   field.style.color = '#333333';
}

И последний шаг - при загрузке страницы вызвать функцию searchFieldDefault, назначить обработчики событий на focus и blur, и убрать кнопку (если не хотите делать этого в CSS):

var field = document.getElementById('search-query');
searchFieldDefault();
setEventHandler(field, 'focus', searchFieldActive);
setEventHandler(field, 'blur', searchFieldDefault);
document.getElementById('search-form-submit').style.display = 'none';

Вот и все. Осталось собрать все кусочки кода в кучу (см. прикрепленный файл) и разместить где-нибудь в html ниже формы (либо назначить этот код как обработчик события 'onload' для 'body'). Должно получится так: