Авторизация

Рубрики блога


Рекомендуем



Последние комментарии

Облако тегов


Устами великих

"Странный этот мир, где двое смотрят на одно и то же, а видят полностью противоположное." © Агата Кристи

Мы Вконтакте

Записки вебмастера Рубрика, которая призвана собрать коллекцию полезных скриптов и авторских решений, интересных особенностей и стандартов верстки, решение вопросов юзабилити и функционала, полезных ресурсов и программ.
26
Сен

Фон для textarea, который пропадает при активации поля

рейтинг материал 0.0 (0) | количество просмотров 1098 | количество коментариев 0
Рассмотрим как сделать фон в виде картинки для текстового поля, который исчезает при событии on focus и возвращается обратно, в случае если текст не был набран.
View demo

В качестве подсказки или просто для стилистического эффекта в тектовое поле textarea можно добавить фон. Для примера, можно взять такую картинку.

Сделать это можно настроив в стилях свойство background, а если картинка будет сильно яркая, то ее можно подправить в редакторе или вовсе сделать полупрозрачной.

.textarea0 {
background:url(http://archie-goodwin.net/_ld/2/42062484.gif) center center no-repeat;
width:500px; 
height:150px;
border:solid #888 1px;}

Но проблема этого варианта в том, что фоновая картинка не пропадает при наборе текста и, даже если она будет в стиле "промокашки" - полупрозрачная и неяркая, то она все равно будет мешать при наборе текста. Собственно, решить эту проблему путем исчезновения фоновой картинки при активации поля мы и попытаемся в этой статье.

Решение с помощью JavaScript

Подготовим почву для примера добавив такой код CSS

.textarea1 {background:url(http://archie-goodwin.net/_ld/2/42062484.gif) center center no-repeat; width:500px; height:150px;border:solid #888 1px;}
.textarea1:focus {background:#fff !important}

Затем код HTML, где применим прописанный выше стиль и обозначим связь с javascript

<textarea class="textarea1" onblur='check(this)'></textarea>

Ну, и непосредственно код javascript, который заставит все работать как нужно

<script>
function check(element){
var val = element.value;
if(val.length >0 ){ 
 element.style.backgroundColor = '#fff';
 element.style.backgroundImage='url()';
}
}
</script>

Решение с помощью jQuery

Здесь стиль CSS будет чуточку короче

.textarea2 {background:url(http://archie-goodwin.net/_ld/2/42062484.gif) center center no-repeat; width:500px; height:150px;border:solid #888 1px;}

Код HTML также будет короче, так как jQuery будет обращаться к textarea через заданный класс

<textarea class="textarea2"></textarea>

По заданной традиции, пропишем чудо-код, который заставляет это работать

<script type="text/javascript">
$('.textarea2').focus(function() {
 $(this).css("background", "none");
}).blur(function() {
 if ($(this)[0].value == '') {
 $(this).css("background", "url(http://archie-goodwin.net/_ld/2/42062484.gif) center center no-repeat");
 }
});
</script>

Решение с помощью примененных событий заданных в свойствах textarea

<textarea style="background:url(http://archie-goodwin.net/_ld/2/42062484.gif) center center no-repeat; width:500px; height:150px;border:solid #888 1px;" onfocus="this.style.background='#ffffff'" onblur="this.style.background=(this.value!='')?('#ffffff'):('url(http://archie-goodwin.net/_ld/2/42062484.gif) center center no-repeat')"></textarea>

Как видно из кода выше, стиль CSS задан как обычно, только не отдельно, а в самом textarea, свойства события onfocus присваивают стиль фона белым цветом, если выделяется текстовое поле, а через свойства события onblur задается стиль, того как будет выглядеть textarea после того как оно снова будет неактивным и без текста. По большому счету, эти события тоже работают через javascript, так что можно считать что это просто другой способ записи.

Выбирайте понравившийся вариант и пользуйтесь на здоровье.

View demo
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]