Javascript 文本区域或文本输入中的多色文本高亮显示

我想设置文本区域中的文本或使用不同颜色的文本输入（一种或另一种都可以，我不需要两者）。想象一下简单的语法高亮显示。假设我定义了一些关键字。我希望当用户输入文本区域或文本输入时，这些单词的颜色会有所不同

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

---

谢谢

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

contenteditable

的主要浏览器是Firefox 2.0）：

var foo=“bar”；

这实际上可以通过在标签内部使用样式来完成，这是我的一个网站上的参考，我在那里做过这项工作

<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 />

您找到了吗

使用jQuery.colorfy

代码：

演示：

放映：

---

您希望文本的任何特定部分具有不同颜色的标准是什么？我会提前识别某些关键字，并希望在用户键入时更改其颜色。类似于IDE中语法高亮显示的工作方式。这里的替代示例（使用CSS而不是内联样式）非常有趣。我不知道有这样的元素存在。你的答案不是100%正确。使用javascript更改textarea属性是可能的，因为这样做是可行的。看看他们的示例代码，看看他们是如何做到的it@user1951751：否，CodeMirror中的主编辑区域不是文本区域。您可以在此处阅读更多信息：。诚然，我的回答没有提到CodeMirror方法（编辑器中的常规div和pre元素，假插入符号，用户输入的隐藏文本区域）。@TimDown有趣的是，仅仅从代码中没有注意到这一点，谢谢你的帮助link@MysteryPancake：除了各个元素的默认样式属性外，没有显著差异（例如，

默认为内联，
为块，
默认为单空格字体，
不）。这不再被维护，使用此选项：这不满足询问者的条件：“当用户键入文本区域或文本输入时，我希望这些单词的颜色不同。”