В дополнение к предыдущей статье. Также понадобилось добавить такую вещь, чтоб при клике на input очищался временный текст. К примеру “Что ищем”
Для этого:
1. Скачиваем последнюю версию jQuery и подкючаем ее в html
2. Создаем наш input type=”text” и label, который будет показываться если javascript у юзера выключен

1
2
<label for="find" class="hint">Введите текст для поиска:</label>
<input type="text" id="find" name="find" value="Введите текст для поиска" />

3. Создаем jQuery plugin, сохраняем его и тоже подключаем в html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){
  // для каждого элемента lable имеющего атрибут class со значением hint выполняем следующие действия
  $('label.hint').each(function() {
    var label = $(this);
    // получаем элемент input у которого атрибут id совпадает с атрибутом for у элемента label
    var input = $('#' + label.attr('for'));
    //прячем элемент label и устанавливаем переменную initial равной тексту элемента label без двоеточия
    var initial = label.hide().text().replace(':', '');
    // устанавливаем обработчики событий focus и blur для элемента input
    input.focus(function() {
      //меняем цвет заднего фона input
      input.css('backgroundColor', '#F0F0F0');
      //если текст в поле ввода это наша подсказка, то по получению фокуса очищаем input
      if (input.val() == initial) {
        input.val('');
      }
      }).blur(function() {
        //меняем цвет заднего фона
        input.css('backgroundColor', '#FFFFFF');
        //если ничего не введно в поле ввода, то при удалении фокуса помещаем нашу подсказку
        if (input.val() == '') {
          input.val(initial);
        }
     //в поле ввода помещаем нашу подсказку
     }).val(initial);
  });
});

Подробней почитать можно тут.

Популярность: 32%

Полезные записи: