我的文本区域文本是't用javascript将我想要的样式设置为CSS

My textarea text isn't styling the way that i would like it to CSS with javascript

本文关键字：文本 我想要 样式 设置 CSS javascript 区域 我的      更新时间：2023-09-26

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

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

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

li.message textarea {     
    color: #999;
}

尽量避免内联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');
    }
}

您可以使用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'); });
});
相关文章：