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

Question

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

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

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

3.) Textarea on blur: Цвет пользовательского ввода установлен на '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;

но не понял правильно. TIA

Answer 1

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

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>.

Answer 2

Предполагая, что под '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;
    }

};