Собственно заметка шпаргалка, как изменить отображение поля ввода input с помощью css и jQuery.
Пример использования данного скрипта можно посмотреть здесь.
Итак:
Добавим элемент label для поля input.
Далее, наша задача сделать так, чтобы при отключенном 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);
});
});
