文本区域或文本输入中的多色文本突出显示答案

【问题标题】：Multicolor Text Highlighting in a Textarea or Text Input文本区域或文本输入中的多色文本突出显示
【发布时间】：2011-01-30 21:58:30
【问题描述】：

我想在 textarea 中设置文本或使用不同颜色的文本输入（一种或另一种都可以，我不需要两者）。想想简单的语法高亮之类的东西。所以，假设我定义了一些关键字。当用户在文本区域或文本输入中键入时，我希望这些词被着色为不同的颜色

我知道这需要一些 CSS、Javascript 的组合，也许还有一些小精灵的灰尘。我想知道我需要深入研究哪个方向来了解如何做到这一点。

谢谢

【问题讨论】：

您希望文本的任何特定部分具有不同颜色的标准是什么？
我会提前确定某些关键字，并希望在用户输入时更改它们的颜色。类似于语法高亮在 IDE 中的工作方式。
这里的替代示例stackoverflow.com/a/33588043/257319（使用 CSS 且无内联样式）

标签： javascript html css

【解决方案1】：

不，您不能在文本区域或文本输入中执行此操作。任何与 CSS 文本相关的属性都会影响 textarea/input 中的整个文本。您需要一个可编辑的元素或文档来实现语法高亮。示例（适用于所有最近的浏览器；最后一个不支持 contenteditable 的主要浏览器是 Firefox 2.0）：

<code contenteditable="true">
  <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>

【讨论】：

这很有趣。我不知道有这样的元素存在。
您的答案并非 100% 正确。可以使用 javascript 更改 textarea 属性，这就是codemMirror 所做的方式。查看他们的示例代码，了解他们是如何做到的
@user1951751：不，CodeMirror 中的主编辑区域不是文本区域。你可以在这里阅读更多信息：marijnhaverbeke.nl/blog/browser-input-reading.html。诚然，我的回答没有提到 CodeMirror 方法（编辑器的常规 div 和 pre 元素、假插入符号、用于用户输入的隐藏文本区域）。
@TimDown 有趣，只是从代码中没有注意到，感谢链接
@MysteryPancake：除了各个元素的默认样式属性外，没有显着差异（例如，<code> 默认为内联，<div> 为块，<code> 默认为等宽字体，@987654328 @ 没有）。

【解决方案2】：

你找到了吗？

使用 jQuery.colorfy

代码： https://github.com/cheunghy/jquery.colorfy

演示： http://cheunghy.github.io/jquery.colorfy/

截图： https://www.youtube.com/watch?v=b1Lu_qKrLZ0

【讨论】：

这个不再维护，使用这个：lonekorean.github.io/highlight-within-textarea

【解决方案3】：

这实际上可以通过在标签内使用样式来完成，这是我做过的网站之一的参考

<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
 blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
 type="text"
 required autofocus />

【讨论】：

这不满足提问者的条件：“我希望这些词在用户在文本区域或文本输入中输入时被涂上不同的颜色”