【问题标题】: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】:

它可能是divcontentEditable 设置为 true

【讨论】:

  • 我想是的。但如果那样做,也需要为低端浏览器想办法。
【解决方案3】:

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

【讨论】:

  • textarea { 位置:绝对;背景:透明 } div { 位置:绝对;颜色:透明 } div b { 背景:灰色 }
猜你喜欢
  • 1970-01-01
  • 2012-07-09
  • 2011-10-24
  • 2018-02-09
  • 2021-11-29
  • 2011-08-31
  • 1970-01-01
  • 2011-06-13
  • 2018-12-04
相关资源
最近更新 更多