使用 JavaScript 设置文本区域的样式 [英] Styling a textarea with JavaScript

问题描述

我是 JavaScript 的新手，想修改一个表单的 textarea(由外部脚本生成)，如下所示:

I'm absolutely new to JavaScript and would like to modify a textarea of a form (which is generated by an external script) as follows:

1.) 开始时的文本区域:标记为您的消息在这里"，颜色为rgb(136, 136, 136)"

1.) Textarea on start: Labeled 'Your message here' in color 'rgb(136, 136, 136)'

2.) 焦点上的文本区域:标签已移除且颜色设置为 'rgb(0, 0, 0)'

2.) Textarea on focus: Label removed and color set to 'rgb(0, 0, 0)'

3.) Textarea on blur:用户输入的颜色设置为'rgb(136, 136, 136)';如果没有输入，标签会重新出现在颜色 'rgb(136, 136, 136)'

3.) Textarea on blur: Color of user input set to 'rgb(136, 136, 136)'; if there's no input, label reappears in color '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

推荐答案

假设您使用 'label' 并不是指标签 HTML 元素，而是 textrea 中的默认文本，如您的示例所示，请尝试以下操作:

Presuming by 'label' you don't mean a label HTML element, but instead default text in the textrea as your example seems to suggest, try this:

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

};

这篇关于使用 JavaScript 设置文本区域的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！