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

How do i add different font colors inside a text field using jquery

本文关键字：字体 颜色 添加 jquery 何使用 文本 字段      更新时间：2023-09-26

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

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

例如，用户可以输入:

something::anotherthing

应该翻译成

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

这怎么可能在文本字段中，因为html不会在那里翻译?

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

实时工作示例:

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());
});

不可以，如果" text field "表示<input type=text>，则不能将文本字段的部分值与该值的其余部分不同。原因是这样一个字段的值根据定义是纯文本。它甚至不是元素的内容，只是元素的值，存储在DOM中，但是无法向其中注入HTML元素。

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

相关文章：