私のテキストエリアのテキストは、私がJavaScriptを使ってCSSにしたいと思うようなスタイルになっていません。

Question

テキストエリアにあるテキストは、テキスト入力後に灰色から黒色に変えてください。テキストは灰色で始まりませんが、それをクリックすると再びオフになり、グレーになります。

HTMLコード

<li class="message"> 
<textarea name="message" id="message_input" rows="4" cols="25" maxlength="200" 
      onfocus="if(this.value=='Add additional information here!') 
      {this.value='';this.style.color='#000';}" 
      onblur="if(this.value=='') { 
      this.value='Add additional information here!';this.style.color='#999';}" 
      >Add additional information here!</textarea> 
</li> 

CSSコード

li.message { 
    position: absolute; 
    top:255px; 
    left: 150px; 
    color: #999; 
} 

Answer 1

スタイルあなたがより簡単にこのJsFiddleを参照してください、DOMを操作するためのjQueryを利用することができるテキストボックスではなく、LI

li.message textarea {  
    color: #999; 
} 

Answer 2

ここでは、focus（）とblur（）に応じてテキストの色を変更しています。

<li class="message"> 
    <textarea name="message" id="message_input" rows="4" cols="25" maxlength="200">Add additional information here!</textarea> 
</li> 

li.message { 
    position: absolute; 
    top:255px; 
    left: 150px; 
    list-style: none; 
} 

$(document).ready(function(){ 
    $('#message_input').focus(function(){ $(this).css('color','gray'); }); 
    $('#message_input').blur(function(){ $(this).css('color','black'); }); 
}); 

Answer 3

インラインJavaScriptの宣言を試してください。また、クラスを使用してスタイルの変更を管理する方がよいでしょう。毎回文字列をチェックするのではなく、デフォルト値を保存してチェックしたいので、これを改善することもできます。 classListはIE7ではサポートされていませんが、サポートする必要がある場合は回避策があります。投稿の答えはあなたのコードが含まれることを確認してください

http://jsfiddle.net/bTRgz/1/

var textarea = document.getElementById('message_input'); 
textarea.onfocus = function() { 
    if (this.value == 'Add additional information here!') { 
     this.value = ''; 
     this.classList.add('active'); 
    } 
}; 

textarea.onblur = function() { 
    if (this.value == '') { 
     this.value = 'Add additional information here!'; 
     this.classList.remove('active'); 
    } 
}