如何在文本区域中使用不同的字体颜色？
我希望在输入特定关键字时文本区域中的字体颜色发生变化，就像在 Visual Studio 中一样。
我没有在任何地方见过这个，所以我不知道这是否可以用 HTML 和 JavaScript 实现。
有人见过这样的东西吗？ 或者知道怎么写吗？
I want the font color to change in a textarea as I type in specific keywords, like in Visual Studio.
I have not seen this anywhere, so I don't know if this is possible with HTML and JavaScript.
Has anyone seen anything like this? Or know how to write it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
Textarea 是一个标准的 HTML 元素，因此是在不久的将来就被发明的。 不幸的是，这意味着它的外观和功能受到限制。
据我所知，更改特定单词的颜色是不可能的。 然而，解决这个问题的一种方法是在页面中嵌入 iFrame。 这样，您就可以将 iFrame 内容视为另一个网页并使用 CSS 对其进行样式设置。
Yahoo RTE，FCKEditor 和 轻量级 RTE 就是这样工作的。
另一个不使用 iFrame 的选项是 Stack Overflow 上使用的编辑器，称为 WMD。 这些文件位于此处。
Textarea is a standard HTML element and so was invented just after the dawn of time. Unfortunately this means it is limited in it's appearance and functionality.
Changing the colours of specific words is not possible as far as I know. However a way to get around this would be to have an iFrame embedded in the page. That way, you can treat the iFrame content as another web page and style it using CSS.
The Yahoo RTE, the FCKEditor and the Lightweight RTE works in this way.
Another option, which does not use an iFrame is the editor used here on Stack Overflow, known as the WMD. The files are here.
这是不可能的。
解决方法是使用
color:#000;-webkit-text-fill-color:transparent使文本区域的字体（而不是光标）透明，然后创建底层、100% 重叠的div< /code> 将在 textarea 的 oninput 事件上将textarea的内容复制+格式化。您需要解决（或避免）因同步这两个元素而产生的一些问题，例如滚动，但这是可以完成的。 我用这种方式制作了自己的 HTML 编辑器。
AFAIK，CSS 属性 -webkit-text-fil-color 在 Opera、Chrome 中受支持，并且应该在即将发布的 Firefox v.48 中得到支持。
It's not possible.
Way to go is to make textarea's font, but not cursor, transparent using
color:#000;-webkit-text-fill-color:transparent, then create underlying, 100% overlappingdivto which content oftextareawill be copied + formatted on textarea'soninputevent.You'll need to adress (or avoid) some issues coming out of syncing these two elements, like scrolling for example, but it can be done. I made my own HTML editor this way.
AFAIK, css property -webkit-text-fil-color is supported in Opera, Chrome and should be in soon-to-be-released Firefox v.48.
您可能需要在客户端上运行 javascript 来检测文本何时发生变化，然后用一些具有正确样式的子 html 元素替换要突出显示的文本。
例如
原始文本：
突出显示的文本
You would probably have to run javascript on the client to detect when the text changes, then replace the text to be highlighted with some child html elements with the proper style.
For example
Original text:
Highlighted text