如何格式化 HTML 文本字段以使用多种样式？答案

【问题标题】：How do I format an HTML text field to use multiple styles?如何格式化 HTML 文本字段以使用多种样式？
【发布时间】：2011-05-24 03:49:15
【问题描述】：

我正在寻找一种将某些格式应用于 JavaScript 中的单行文本输入字段的方法。它会像这样工作：

用户输入公式，如：

(7 + 3) ^ x

当用户键入时，我的代码会使用颜色对其进行格式化，如下所示：

我可以进行必要的解析，但我不知道如何在用户编辑时将这些样式应用到用户的文本中。

我一直在努力为 Google 寻找合适的东西。我的搜索主要将我引向成熟的文本编辑器。

有这样的组件吗？如果没有，我可以使用字段来实现吗？

【问题讨论】：

【解决方案1】：

出于好奇，我构建了这个：http://jsfiddle.net/hunter/npbDL/

这会捕获击键并将span-wrapped 字符插入到元素中。如果字符映射到字符到类集合中的某个项目，它还会为 span 指定指定的类。

它还处理输入和退格。

你可以从那里拿走它......

【讨论】：

这很有趣...实现起来有点低级，我希望这是一个很好的起点...
如果它能让你感觉更好，我可以把它做成一个 jQuery 插件。 ;) 这不是大量的 jQuery，我相信它可以优化
太棒了，我真的很喜欢。只是我试图找到已经存在的类似东西。因为要获得最终用户期望的一切——闪烁的光标、^A 全选、像本机控件一样添加，无论操作系统和浏览器如何——将是一项不那么简单的任务！但如果它不存在，那我就只能硬着头皮了。
您可以应用这个概念并将文本框中内容的格式化 html 轻松写入 div。

【解决方案2】：

我认为实现所需样式的唯一方法是将 HTML 标签包裹在单个字符周围，然后为标签设置样式，我认为您不能在 <input type="text"> 中做到这一点。

有一个广受支持的contenteditable 属性，它使大多数元素都可编辑，但我不确定它是否也允许这样做。如果没有人提供更好的答案，您可能希望在此处查看最后一个示例的源代码：http://www.hyperwrite.com/Articles/contenteditable.aspx

【讨论】：

【解决方案3】：

您不能用各种颜色来格式化文本字段。您也许可以在 WYSIWYG 编辑器中使用颜色...或 Flash。

【讨论】：

【解决方案4】：

我认为您无法更改任何 <input> 或 <textarea> 中的单个字符。例如，查看 Etherpad 的源代码 - 它使用类似的系统（不完全相同 - 它突出显示其他内容），它可能会对您有所帮助。

【讨论】：