Шаг 169.
Библиотека jQuery. Интерактивные формы. Компактные формы. Текст-заполнитель для полей (окончание)

    На этом шаге мы отредактируем приведенный пример.

    Мы получили замечательный эффект, но здесь есть пара проблем:

  1. Текст подписи перекроет текст, который будет вводиться пользователем в поле, как показано на рисунке 1.


    Рис.1.Текст подписи перекрывает текст в поле ввода

  2. Теперь перейти к полю ввода можно будет только клавишей табуляции. Поскольку подпись накрывает поле ввода, пользователь не сможет щелкнуть на поле ввода мышью.

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

    Скрыть подпись в момент получения полем фокуса ввода достаточно просто:

$(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.




Предыдущий шаг Содержание Следующий шаг