Archie Goodwin

В качестве подсказки или просто для стилистического эффекта в тектовое поле 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, так что можно считать что это просто другой способ записи.

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