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

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

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

来源

2011-03-29 mockee

使用Firebug并分析HTML和CSS以查看他们做了什么。这可能比背景颜色更重要。 – 2011-03-29 09:54:01

我通常使用Range的surroundContents方法来突出显示HTML元素中的文本，但它不适用于表单元素（它仅支持纯文本）。 – mockee 2011-03-29 10:10:14

你不能为此使用textarea元素。只需制作一个contentEditable contentEditable div并使用javascript来设计它。

来源

2011-03-29 10:13:01 Andrei

但我发现Facebook没有使用这种方法。 – mockee 2011-03-29 11:18:03

那么，FB怎么做呢？如果你删除了textarea节点，你可以看到突出显示 - 它位于textarea后面。你可以选择它，因为它有不可见的文本！突出显示实际上是textarea内容的克隆，字体颜色设置为透明，BG颜色设置为选择突出显示颜色。一个选择的真实性只是在后台进行的一个漂亮的视觉效果 - Facebook没有写或修改textarea显然。 – jozecuervo 2011-12-07 20:55:38

它可能是一个div与contentEditable设置为true

来源

2011-03-29 10:14:33 KooiInc

我这么认为。但是如果这样做，还需要为低端浏览器设想一种方法。 – mockee 2011-03-29 10:24:37

这可能是事件中的风格和其他建议使它CONTENTEDITABLE股利。关于textarea我已经阅读过类似的问题here。检查它是否是你想要的。

来源

2011-03-29 10:20:02 ace

textarea {posision：absolute;背景：透明} div {posision：absolute;颜色：透明} div b {background：gray} – mockee 2011-03-31 05:16:55

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

回答

相关问题