Jquery и input text
В дополнение к предыдущей статье. Также понадобилось добавить такую вещь, чтоб при клике на input очищался временный текст. К примеру «Что ищем»
Для этого:
1. Скачиваем последнюю версию jQuery и подкючаем ее в html
2. Создаем наш input type="text" и label, который будет показываться если javascript у юзера выключен
1 2 |
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); }); }); |
Подробней почитать можно .
Популярность: 3%
Оставить комментарий