Question

我希望textarea中的文本从灰色开始，并在输入文本后变为黑色。文字不会从灰色开始，但是如果我点击它然后关闭然后再次它将是灰色的。

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

设置文本框的样式，而不是LI

li.message textarea {     
    color: #999;
}

Answer 2

您可以利用jQuery更轻松地操作DOM，请参阅此JsFiddle示例，其中我将根据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声明。使用类来管理样式更改也更好。即使这样也可以改进，因为我希望看到存储和检查默认值，而不是每次都检查字符串。 IE7不支持classList，但如果您必须支持，则有解决方法。

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

我的textarea文本没有使用javascript来设置CSS的方式

3 个答案: