Как добавить placeholder к полю формы поиска в Drupal

01 мая 2014 - 16:25

Часто дизайнеры кнопку формы поиска сайта выполняют в виде лупы или вообще убирают, тогда для подсказки пользователю в поле ввода формы ставят надпись «Поиск», «Найти» и др.

Данную задачу можно решить несколькими способами. Первый и, пожалуй, самый простой – добавить к полю ввода формы поиска атрибут placeholder, который поддерживают все современные браузеры. Чтобы добавить placeholder к текстовому полю формы поиска в Drupal, в template.php темы сайта используем функцию-хук hook_form_alter:

function THEME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    $form['search_block_form']['#attributes']['placeholder'] = t('Site search');
  }
}

На мой взгляд, у атрибута placeholder имеется один недостаток – при получении фокуса ввода текст, заданный в placeholder, исчезает только после того, как пользователь начинает вводить символы с клавиатуры. Т.е. у пользователя может возникнуть впечатление, что вначале необходимо удалить слово «Поиск», а уже затем вводить свой текст.

Исходя из описанного выше недостатка placeholder я часто предпочитаю использовать способ с JavaScript, применяя атрибуты поля ввода onblur и onfocus. Для реализации этого способа в Drupal нам понадобится изменить приведенный выше код следующим образом:

function THEME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    $form['search_block_form']['#attributes']['value'] = t('Site search');
    $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = '" . t('Site search') . "';}";
    $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == '" . t('Site search') . "') {this.value = '';}";
  }
}

Само собой, в обоих случаях не забудьте сменить THEME на машинное имя вашей темы и очистить кеш сайта.

Еще один, довольно оригинальный метод решения задачи на CSS 3 описан на Хабре: http://habrahabr.ru/post/216669/.

Естественно, описанные в данной статье приемы могут быть применены полям любых других форм сайта на Drupal. Замечу также, что для форм, создаваемых с помощью Webform, разработан модуль https://drupal.org/project/webform_hints, а 4-я ветка модуля Webform уже содержит в себе функционал задания атрибута placeholder.

Тэги: