Javascript 如何使用jquery在文本字段中添加不同的字体颜色

我有一个文本字段，有人可以在其中键入字符串

根据用户在此字符串中键入的内容，我希望更改为特定单词的颜色。类似于语法突出显示

例如，用户可以键入：

something::anotherthing

应该翻译成什么

<span class=color1>something</span><span class=color2>::</span>anotherthing 

something：：另一个

在文本字段中如何实现这一点，因为html不会在文本字段中翻译？

使用div或其他支持元素的属性。这就是大多数在线html编辑器的工作方式。您将获得选择文本区域、更改其颜色和其他属性的内置支持，以及撤消/重做支持

:

HTML

---

不可以，假设“文本字段”的意思是

，则不能将文本字段值的部分设置为与该值的其余部分不同的样式。原因是，根据定义，此类字段的值是纯文本。它甚至不是存储在DOM中的元素的内容，只是它的值，但无法将HTML元素注入其中

---

如果确实要创建输入文本编辑器，则应首先搜索该主题的现有问题和答案，然后，如果问题仍然存在，则发布一个关于使用可编辑元素遇到的特定问题的问题。

内容太广泛。我建议你去使用一个已经存在的插件。如果它不符合您的需要，请编辑它。我会用演示给您一个答案，请访问我的演示和测试：：然后您将了解如何做。顺便说一句，请记住，当您使用内容可编辑时，用户将能够在此处插入各种html，他甚至可以粘贴图像，其中将有和图像标记。您可以通过处理粘贴和击键事件来管理这一点。这件事很复杂，所以除非有人要求，否则我不会详细说明。我没有否决这件事，但这并不是对所问问题的真正回答。这可能是OP真正想要的答案，但答案应该根据他们如何解决实际提出的问题来评估。Jukka，我明白你的意思。Sandersen要求在文本字段中执行此操作。因为这是不可能的，所以我提出了类似的建议。我相信这对这个问题有一定的价值。我对你的答案投了赞成票，因为它确实以更具体的方式解决了这个问题。

<div contenteditable="true">
    change the color!
</div>


<button>
    red
</button>
<button>
    blue
</button>
<button>
    green
</button>

$('button').click(function(){
document.execCommand('ForeColor', false, $(this).html());
});