Question

我是JavaScript的新手，想要修改表单的textarea（由外部脚本生成），如下所示：

1。）开始时的Textarea：用'rgb（136,136,136）'标记'你的信息在这里'

2。）焦点上的Textarea：删除标签并将颜色设置为'rgb（0,0,0）'

3。）Textarea on blur：用户输入的颜色设置为'rgb（136,136,136）';如果没有输入，标签会重新出现颜色'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

Answer 1

这看起来非常接近我。你必须为textarea的全部或全部着色，如果没有一些疯狂的黑客，你就无法为某些角色着色。

var foo = document.getElementById('HCB_textarea');
var labelVal = 'Your message here'
foo.value = origVal;
foo.style.color = 'rgb(136, 136, 136)';
foo.onfocus = function() {
  if( foo.value == labelVal ) foo.value = "";
  foo.style.color = 'rgb(136, 136, 136)';
}
foo.onblur = function() {
  if( foo.value != "" ) {
    foo.style.color = 'rgb(0, 0, 0)';
  } else {
    foo.value = labelVal;
    foo.style.color = 'rgb(136, 136, 136)';
  }
}
// You should modify this to use your actual form name.
document.forms[0].onsubmit = function() {
  if( foo.value == labelVal ) foo.value = "";
}

编辑 - 我修改了代码，因为Mario指出您希望标签位于textarea内部，而不是<label>元素。

Answer 2

通过'label'假设你并不是指标签HTML元素，而是像textrea中的默认文本一样，试试这个：

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设计textarea样式

2 个答案: