我的textarea文本没有使用javascript样式化到CSS

Question

I would like the text in the textarea to start off grey and turn to black after text has been entered. the text wont start off grey but if i click on it then off then on again it will be grey.

HTML code

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

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

Answer 1

Style the textbox, not the LI

li.message textarea {     
    color: #999;
}

Answer 2

You could utilize jQuery to more easily manipulate the DOM, see this JsFiddle example where I am changing the text color depending on focus() and 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

Try and avoid inline javascript declarations. It is also better to use classes to manage your style changes. Even this could be improved upon as I would like to see the default value stored and checked instead of checking the string each time. classList is not supported by IE7, but there are workaround if you must support it.

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');
    }
}