Украшаем input с помощью CSS

Собственно заметка шпаргалка, как изменить отображение поля ввода input с помощью css и jQuery.

Пример использования данного скрипта можно посмотреть здесь.


Итак:
Добавим элемент label для поля input.

<label for="find" class="hint">Поиск по сайту</label>
<input type="text" id="find" name="find" value="Поиск по сайту" />


Далее, наша задача сделать так, чтобы при отключенном javascript пользователь видел подсказку в виде текста в элементе label, а при включенном javascript текст подсказки был в самом input. Реализуем это в javascript с помощью jquery.

$(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);
        });
      });
Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Веб-мастерская
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления

Not registered?