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

Question

我有一个文本字段，有人可以输入字符串。

根据用户在此字符串中键入的内容，我想将其更改为特定单词的颜色。与语法高亮相似。

例如，用户可以输入：

something::anotherthing

应该翻译成

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

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

Answer 1

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

live working example：

HTML

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


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

JS（jQuery）

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

Answer 2

不，假设“文本字段”表示<input type=text>，则无法将文本字段值的某些部分与该值的其余部分区分开来。原因是这样一个字段的值根据定义是纯文本。它甚至不是存储在DOM中的元素的内容，只是它的值，但是没有办法将HTML元素注入其中。

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