在文本区域或文本输入框中实现多颜色文本高亮显示

Question

我想使用不同的颜色（仅选择其中一种即可，不需要两者同时存在）在文本输入框中设置文本。类似于简单的语法高亮。假设我定义了一些关键字，希望当用户输入文本时，这些关键字会以不同的颜色显示。

我知道这需要结合CSS、Javascript和可能是一些神奇的代码实现。我想知道应该从哪个方向开始研究，才能找到如何完成这项任务的方法。

谢谢

- oneself

---

你希望根据什么标准来确定文本的某个特定部分应该有不同的颜色？ - David Thomas

我会提前识别某些关键字，并希望在用户输入时更改它们的颜色。就像集成开发环境中的语法高亮一样。 - oneself

这里有一个替代示例 http://stackoverflow.com/a/33588043/257319 （使用CSS而不是内联样式） - user257319

Answer 1

不，你不能在文本区或文本输入框中实现语法高亮。任何 CSS 文本相关属性都会影响文本区/输入框中的全部文本。你需要使用可编辑元素或文档来实现语法高亮。以下是一个示例（在所有最新版本的浏览器中都有效；最后一个不支持 contenteditable 的主流浏览器是 Firefox 2.0）：

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

- Tim Down

---

你的答案并不完全正确。使用JavaScript可以改变文本区域的属性，这正是CodeMirror所采用的方式。查看他们的示例代码以了解他们是如何实现的。 - LegendaryLaggy

@user1951751：不，CodeMirror中的主编辑区不是textarea。您可以在此处阅读更多信息：http://marijnhaverbeke.nl/blog/browser-input-reading.html。不可否认，我的答案没有提到CodeMirror的方法（使用常规div和pre元素作为编辑器，虚拟插入符号，隐藏的textarea用于用户输入）。 - Tim Down

您不需要为某些属性分配值，其中包括ContentEditable。<code contentEditable>同样有效。 - Arjun

@Arjun：没错。但是，特别是在SO上，我更喜欢明确提供值，因为contenteditable不是布尔属性。它允许的值为“true”，“false”和“inherit”。 - Tim Down

@MysteryPancake：除了各自元素的默认样式属性（例如，<code> 默认为内联，<div> 为块级，<code> 默认为等宽字体，<div> 不是），没有什么显著的区别。 - Tim Down

Answer 2

你找到了吗？使用jQuery.colorfy。

Code: https://github.com/cheunghy/jquery.colorfy

Demo: http://cheunghy.github.io/jquery.colorfy/

Screencast: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

- Zhang Kai Yu

---

这个已经不再维护了，请使用这个：https://lonekorean.github.io/highlight-within-textarea/ - Pezhvak

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

- Provision

---

这不满足提问者的条件： “我希望在用户输入文本区域或文字输入框时，那些单词可以以不同的颜色显示。” - Tim