Украшаем input с помощью CSS. Unobtrusive JavaScript.
October 13th, 2008 by Yuriy DrozdovРешил продолжить сагу об украшениии input. (Начало можно почитать в статьях Украшаем input с помощью CSS и Украшаем input с помощью CSS. Продолжение.) В прошлой статье у нас получился такой html:
HTML:
-
<input type="text" id="find" name="find" value="Введите текст для поиска" onfocus="this.style.backgroundColor='#F0F0F0';this.value='';" onblur="this.style.backgroundColor='#FFFFFF';if (this.value != '') {this.onfocus = function(){this.style.backgroundColor='#F0F0F0';};} else this.value='Введите текст для поиска';" />
Беда в том, что с отключенным javascript пользователь может не понять предназначение данного элемента ввода. Исправим эту досадную ошибку добавлением элемента label, а весь javascript для input вынесем в отдельную функцию.
HTML:
Далее, наша задача сделать так, чтобы при отключенном javascript пользователь видел подсказку в виде текста в элементе label, а при включеном javascript текст подсказки был в самом input. Реализуем это в javascript с помощью jquery.
JAVASCRIPT:
-
$(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);
-
});
-
});
В действии описанное выше можно увидеть ниже.
Почитать
Unobtrusive JavaScript with jQuery
Великолепная статья! Продолжай в том же духе.
Единственное, надо что-то сделать с копированием кода из статей.
Спасибо. Хорошо, посмотрю, что можно с этим придумать.
Эх, IE - зло, под ним не работает скрипт…
Все работает под IE, просто у Юры в исходник как-то попали теги br, их надо подчистить (см. ошибку javascript’а).
Спасибо, поправил.
Спасибо, ваша правда.
Спасибо, пригодилось!
Как хорошо, что не нужно мучиться с JavaScript’ом (потому что плохо его знаешь), просто взял, поправил пару кусочков кода — и готово! 
Юрий: нескромный вопрос: а из какой библиотеки функция ‘$’, с помощью которой достаём все элементы типа ‘label’ css-класса ‘hint’ из document’а (в JavaScript коде, насколько я не заблуждаюсь, именно это делается с помощью вызова $(’label.hint’))? Я подключил ajax v.1.0.4; ajax’овская функция ‘$’ с параметрами ‘label.hint’ возвращает null
(
Неплохо бы было добавить в статью хотя бы название библиотеки, которая используется, а может быть, но это в идеале, ссылку на исходники, а то даже и объяснение:
“Мол, в такой-то и такой-то библиотеке ‘Библиотека’, используемую в коде данной статьи версию которой библиотеки, кстати, можно закачать по адресу ‘Адрес’, функция ‘$’ при вызове возвращает стандартный JavaScript массив, к которому применяется добавленная данной библиотекой к данному массиву (а, быть может, и вообще к prototype объекта Array, то есть ко всем массивам) функция ‘each(call_back)’, которая функция each применяет переданную ей в качестве аргумента функцию call_back к каждому элементу возвращённого функцией ‘$’ массива”, и делает то-то (а тут см. код)”.
А то иначе просто непонятно, как запустить код, чтоб он сработал у тебя.
Я, например, хотя и посмотрел исходники страницы с этой статьёй, и скачал все подключаемые через тэг с определённым атрибутом src .js-файлы, всё равно так и не отыскал одного-единственного файла, в котором определяется функция ‘$’ 
Так что мне остаётся только восхищаться мастерством автора этой статьи. 
Неужели все, кто пишет комментарии к этой статье, знают, КАКАЯ библиотека должна быть подключена, просто по виду вызовов функции этой библиотеки (например, “Ага, используется each, значит, это не Ajax…”)?
)
А так, вообще, код работает (у меня, по крайней мере, в Firefox’е), только я не могу понять, почему.
)
Сергей, спасибо за Ваш комментарий. Но, если внимательней прочитать статью, то можно заметить эту строчку:
Она стоит как раз над рабочим примером. К тому же слово jquery является ссылкой на эту javascript библиотеку. Eсли Вы считаете, что это не достаточное объяснение, предложите лучшее. Спасибо.
Ага… Не заметил, извините.
Просто с программированием я пока знаком плохо; больше как-то по теории… 
Вот кросс-браузерный рабочий код, который решает проблему с “наезжанием” текста на изображение - он не такой элегантный, но то, что получается, выглядит и взаимодействует с пользователем совершенно точно также, как обычное поле ввода с изображением, но без наезжания:
———————-
Файл CSS.css:
———————-
.csSeekLabel{
}
.csSeekEncloser{
border : solid 1px #848388 ;
}
.csSeekImage{
border : 0px ;
padding-left : 3px ;
vertical-align : -2px ;
}
.csSeekText{
border : 0px ;
}
———————-
Файл index.html
———————-
//
Введите текст для поиска:
. По-моему, это работает.
Почему, правда, работает эта функция jQuery, ‘$’, я так и не понял,
но вот как, кажется, можно использовать jQuery в JavaScript для создания эквивалента поля ввода с изображением без наезжания текста на изображение при вводе слишком длинного текста.
А статья пригодилась, спасибо.