javascript - 如何使用 JavaScript 更改文本区域的背景颜色

标签 javascript

我只想知道如何将文本区域的背景颜色更改为在文本框中键入的颜色。我设法设置了文本颜色、字体和大小,但以同样的方式设置背景似乎不起作用。 我的文本颜色和背景代码是:

脚本:

function setColor(where, Color)
    {
        if (where == "backgroundcolour")
          document.getElementById('textarea').style.backgroundColor = Color;
        if (where == "colourtext")
          document.getElementById('textarea').style.color = Color;
    }

HTML:

<p>
  Card color: <input type = "text"  name = "backgroundcolour" 
                           size = "10"
                           onchange = "setColor('backgroundcolour',
                                               this.value)">
  <br>
  Text color: <input type = "text"  name = "colourtext" 
                           size = "10"
                           onchange = "setColor('colourtext',
                                               this.value)">
  <br>
</p>
<textarea id = 'textarea' name="data" cols="100" rows="10">

</textarea>

好像我的互联网阻止了脚本所以它不会改变背景

最佳答案

您的代码确实有效。也许您忘记从文本框中移除焦点以触发更改事件。

function setColor(where, Color)
    {
        if (where == "backgroundcolour")
          document.getElementById('textarea').style.backgroundColor = Color;
        if (where == "colourtext")
          document.getElementById('textarea').style.color = Color;
    }
<p>
  Card color: <input type = "text"  name = "backgroundcolour" 
                           size = "10"
                           onchange = "setColor('backgroundcolour',
                                               this.value)">
  <br>
  Text color: <input type = "text"  name = "colourtext" 
                           size = "10"
                           onchange = "setColor('colourtext',
                                               this.value)">
  <br>
</p>
<textarea id = 'textarea' name="data" cols="100" rows="10">

</textarea>

关于javascript - 如何使用 JavaScript 更改文本区域的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5449221/

相关文章:

javascript - 从 Ajax 调用获取响应

javascript - 如何将行车路线路线段与 Google Maps API V3 中的路线名称配对?

javascript - nodeJS util.format 传递一个数组

javascript - 使用 for 循环更改基于不同列的列更改所有列

用于桌面或移动设备检测的 JavaScript

javascript - 从 php if else 条件向 html 元素添加属性

javascript - 对象数组反展平的更好解决方案

javascript - 如何用jQuery模拟输入点击、按空格键和退格键?

javascript - jQuery 切换下一个 P

javascript - PhantomJS queryselector().textcontent 不返回任何内容