Убираем кнопку у формы поиска (облегчаем дизайн)

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

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

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

В общем случае, это делается просто атрибутом тега input - placeholder. Однако если перед вами стоит задача поддержки старых браузеров - не обойтись без javascript.

Рассмотрим случай когда 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'). Должно получится так:

Круто! наш placeholder готов!

Теги: 
Файлы: 

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

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки