如何在textarea中使用不同的字体颜色?

时间:2009-03-13 06:52:09

标签: html fonts colors

我希望在键入特定关键字时在textarea中更改字体颜色,例如在Visual Studio中。

我没有在任何地方看到这个,所以我不知道HTML和JavaScript是否可以实现这一点。

有没有人见过这样的东西?或者知道如何写它?

3 个答案:

答案 0 :(得分:4)

Textarea是一个标准的HTML元素,因此是在很久以后发明的。不幸的是,这意味着它的外观和功能受到限制。

据我所知,改变特定单词的颜色是不可能的。然而,解决这个问题的一种方法是在页面中嵌入iFrame。这样,您就可以将iFrame内容视为另一个网页,并使用CSS对其进行样式设置。

Yahoo RTEFCKEditorLightweight RTE以这种方式运作。

另一个不使用iFrame的选项是Stack Overflow上使用的编辑器,称为WMD。文件为here

答案 1 :(得分:1)

这是不可能的。

要做的就是使用color:#000;-webkit-text-fill-color:transparent制作textarea的字体,而不是光标,透明,然后创建div内容为textarea的基础,100%重叠oninput在textarea' s {{1}}事件中复制+格式化。

您需要解决(或避免)同步这两个元素的问题,例如滚动,但可以完成。我用这种方式创建了自己的HTML编辑器。

AFAIK,css属性-webkit-text-fil-color在Opera,Chrome中受支持,应该很快就会发布Firefox v.48。

答案 2 :(得分:-4)

您可能必须在客户端上运行javascript以检测文本何时更改,然后使用正确的样式替换要使用某些子html元素突出显示的文本。

例如

原文:

This is what the user typed.

突出显示的文字

This is what the <a class="className">user</a> typed.