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

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

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.

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