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

我正在寻找一种方式来一些格式适用于单行文本输入字段中的JavaScript。它的工作是这样的：如何格式化HTML文本字段以使用多种样式？

在公式中的用户类型，例如：

（7 + 3）^ X

当用户类型，我的代码将使用颜色看起来像格式化这样的：

enter image description here

我可以做必要的分析，但我不知道如何将这些样式应用到用户的文本，因为他们编辑。

我一直在苦苦寻找正确的事情，以谷歌为。我的搜索主要是让我成为完整的文本编辑器。

有这样的成分？如果没有，我可以用一个<输入型=“文本” ... >领域实现这一目标？

来源

2011-05-23 Steve McLeod

可能的重复：http://stackoverflow.com/questions/6101065/styling-letters-of-a-word-within-an-input-differently-possible/6101092#6101092 – PeeHaa 2011-05-23 19:01:58

你可能想看看CodeMirror：http://codemirror.net/ – 2011-05-23 19:17:25

看看我的答案，也许它会帮助 – hunter 2011-05-23 19:41:15

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

这捕获键击，并插入一个span -wrapped字符转换为元素。如果该字符映射到字符到类集合中的一个项目，它也会给出指定的类别span。

它还处理输入和退格。

你或许可以把它从那里...

来源

2011-05-23 19:00:40 hunter

这是有趣的...有点更低级的实现，我会喜欢，但一个很好的起点... – 2011-05-24 11:56:37

如果它让你感觉更好，我可以让它成为一个jQuery插件。 ;）这不是一吨jQuery，我相信它可以优化 – hunter 2011-05-24 12:20:01

这是伟大的，我真的很喜欢它。这只是我试图找到类似的东西而已。因为要获得终端用户期望的所有内容 - 闪烁光标，^ A全选，添加像本机控制，无论操作系统和浏览器如何 - 都将是一项不太平凡的任务！但是，如果它不存在，那么我只能咬下子弹。 – 2011-05-24 14:43:28

我想你可以实现造型你想要的唯一途径是通过围绕单个字符的HTML标签，然后造型的标签，我不认为你可以在<input type="text">内做到这一点。

有广泛支持的contenteditable属性，它使大多数元素可编辑，但我不确定它是否允许这一点。如果没有其他人提供了一个更好的答案，你可能想在最后一个例子查看源代码在这里：http://www.hyperwrite.com/Articles/contenteditable.aspx

来源

2011-05-23 19:00:56

你不能用各种颜色格式的文本字段。您可以在所见即所得编辑器或Flash中使用颜色。

来源

2011-05-23 19:00:59 santa

我不认为你可以更改任何<input>和<textarea>中的单个字符。例如，查看Etherpad的源代码 - 它使用类似的系统（不完全相同 - 它强调其他的东西），它可能会帮助你。

来源

2011-05-23 19:01:23 mrkva

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

回答

相关问题