Стилизация текстовой области с помощью JavaScript

Question

Я абсолютно новичок в JavaScript и хотел бы изменить текстовую область формы (которая создается внешним скриптом) следующим образом:

1.) Текст в начале: с надписью "Ваше сообщение здесь" в цвете "RGB (136, 136, 136)"

2.) Текстовое поле в фокусе: метка удалена, а цвет установлен на "rgb(0, 0, 0)"

3.) Текстовое поле размытия: цвет пользовательского ввода установлен на "rgb (136, 136, 136)"; если нет ввода, метка появляется снова в цвете 'rgb (136, 136, 136)'

Я экспериментировал с

var foo = document.getElementById('HCB_textarea');
foo.innerHTML = 'Your message here';
foo.style.color = 'rgb(136, 136, 136)';
foo.onfocus = do something;
foo.onblur = do something;

но не понял это правильно. ТИА

Answer 1

Предполагая, что под 'label' вы подразумеваете не HTML-элемент label, а вместо этого текст по умолчанию в textrea, как кажется из вашего примера, попробуйте следующее:

var foo = document.getElementById('HCB_textarea');
var defaultText = 'Your message here';
foo.value = defaultText;
foo.style.color = '#888';
foo.onfocus = function(){
    foo.style.color = '#000';
    if ( foo.value == defaultText ) {
        foo.value = '';
    }
};
foo.onblur = function(){
    foo.style.color = '#888';
    if ( foo.value == '' ) {
        foo.value = defaultText;
    }

};

Answer 2

Это выглядит довольно близко ко мне. Вы должны раскрасить всю текстовую область или ее нет, вы не можете раскрасить определенных персонажей без некоторых безумных хаков.

var foo = document.getElementById('HCB_textarea');
var labelVal = 'Your message here'
foo.value = origVal;
foo.style.color = 'rgb(136, 136, 136)';
foo.onfocus = function() {
  if( foo.value == labelVal ) foo.value = "";
  foo.style.color = 'rgb(136, 136, 136)';
}
foo.onblur = function() {
  if( foo.value != "" ) {
    foo.style.color = 'rgb(0, 0, 0)';
  } else {
    foo.value = labelVal;
    foo.style.color = 'rgb(136, 136, 136)';
  }
}
// You should modify this to use your actual form name.
document.forms[0].onsubmit = function() {
  if( foo.value == labelVal ) foo.value = "";
}

---

РЕДАКТИРОВАТЬ - Я изменил код, потому что Марио указал, что вы хотели, чтобы ярлык был внутри текстовой области, а не <label> элемент.