如何在文本框中使用不同的字体颜色？

Question

我希望在文本框中输入特定的关键词时，能够像Visual Studio一样改变字体颜色。

我没有看到过这种效果，所以我不知道它是否可以通过HTML和JavaScript实现。

有人见过类似的效果吗？或者知道如何编写它吗？

- sol

Answer 1

是一个标准的HTML元素，因此它早在很久以前就被发明出来了。不幸的是，这意味着它在外观和功能上受到了限制。

据我所知，无法更改特定单词的颜色。但是，解决此问题的一种方法是在页面中嵌入iFrame。这样，您可以将iFrame内容视为另一个网页，并使用CSS进行样式设置。

Yahoo RTE、FCKEditor和Lightweight RTE都是以这种方式运作的。

另一个选项是在Stack Overflow上使用的编辑器，称为WMD。文件在这里。

- Jon Winstanley

Answer 2

这是不可能的。

解决方法是使textarea的字体透明，但不是光标，使用color:#000;-webkit-text-fill-color:transparent，然后创建一个覆盖在上面的100%重叠的div，在textarea的oninput事件中将的内容复制并格式化到该<div>中。</p> <p>您需要处理（或避免）同步这两个元素时出现的一些问题，例如滚动等，但可以完成。我就是用这种方法制作了自己的HTML编辑器。</p> <p>据我所知，CSS属性-webkit-text-fil-color在Opera、Chrome中得到支持，并且应该很快在即将发布的Firefox v.48中得到支持。</p>

- Martin

Answer 3

你可能需要在客户端上运行 JavaScript 来检测文本何时发生更改，然后用一些带有适当样式的子 HTML 元素替换要突出显示的文本。

例如：

原始文本：

This is what the user typed.

突出显示的文本

This is what the <a class="className">user</a> typed.

- TJB