如何格式化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文本字段以使用多種樣式？

回答

相關問題