如何为 HTML textarea 元素的某些内部文本设置背景颜色？答案

【问题标题】：How to set background color for some inner text of HTML textarea element?如何为 HTML textarea 元素的某些内部文本设置背景颜色？
【发布时间】：2011-03-29 09:49:44
【问题描述】：

看起来像是选中了一些文本，但是当你点击它或移动光标时背景颜色不会消失。

【问题讨论】：

使用 Firebug 并分析 HTML 和 CSS，看看他们做了什么。它可能不仅仅是背景颜色。
我通常使用 Range 的环绕内容方法来突出 HTML 元素中的文本，但它不适用于表单元素（它只支持纯文本）。

标签： javascript html dom range

【解决方案1】：

您不能为此使用 textarea 元素。只需制作一个 contentEditable contentEditable div 并使用 javascript 设置它的样式。

【讨论】：

但是我发现facebook没有使用这个方法。
那么，那FB是怎么做的呢？如果您删除 textarea 节点，您可以看到突出显示仍然存在 - 它位于 textarea 后面。您可以选择它，因为它有不可见的文字！高亮实际上是 textarea 内容的克隆，字体颜色设置为透明，BG 颜色设置为选择高亮颜色。选择的外观实际上只是在后台进行的漂亮视觉效果 - facebook 显然根本没有写入或修改 textarea。

【解决方案2】：

它可能是div，contentEditable 设置为 true

【讨论】：

我想是的。但如果那样做，也需要为低端浏览器想办法。

【解决方案3】：

这可能是在事件期间设置样式的 div，并且正如其他人建议的那样，使其成为 contentEditable。关于 textarea 我读过类似的问题here。检查它是否是你要找的东西。

【讨论】：

textarea { 位置：绝对；背景：透明 } div { 位置：绝对；颜色：透明 } div b { 背景：灰色 }