我如何在輸入文字時輸入文字樣式？

每當輸入一個輸入字段的字符，我解析表達式，使得獲得：我如何在輸入文字時輸入文字樣式？

令牌的陣列，即，tokenArray = [2，*，COS，（4）]
令牌類型的對應陣列，即tokenType = [NUMBER，運算符，函數，（，NUMBER）]

我需要樣式每個令牌（例如分配不同的顏色，以每個令牌）基於其各自的令牌類型。

我已經能夠很容易地樣式輸入文本的動態副本，在不同的<div>（不是輸入文本本身，這就是我要求的幫助）如下：

的JavaScript：

function processExpression() { 
    var userInput = document.getElementById('inputText').value; 

     var resultOutput = parse(userInput); //this generates the two arrays described above 

     for (i in tokenArray) 
      newHTML += "<span style='color: " + colorMap[ tokenType[i] ] + " '>" + tokenArray[i] + "</span>"; 

      document.getElementById('styledExpression').innerHTML = newHTML; 
}

HTML：

<input type="text" id="inputText" value="" placeholder="Type expression" size="40" 
     onKeyDown="processExpression();" 
     onKeyUp="processExpression();"/> 

<div id="styledExpression" value=""></div>

我怎麼能直接樣式輸入文本的輸入字段，我鍵入？任何JavaScript解決方案？

UPDATE

Tim的問題的答案replace innerHTML in contenteditable div提供了一些很好的幫助。

您將如何修改http://jsfiddle.net/2rTA5/2/來解決在每個keydown中何時重新編譯整個可編輯？例如，假設你輸入了「= if（AND（3 = 2，A1：A4，OR（0,1）），5,6）」，並且在每個keydown中編輯器都以編程方式重寫（參見上面的標記描述），我失去了光標。

此解決方案如何忽略標記或字符或節點的類型，並簡單地保存並恢復keydown之前的絕對光標位置（從開始位置開始）？

來源

2012-05-05 Gian

我其實剛開始工作就像這樣一對夫婦rs前！這並不容易，但我迄今爲止可能會幫助您開始使用：https://github.com/minitech/OpenEdit – Ryan

或者，您還可以嘗試使背後的透明和樣式化爲''。這適用於背景顏色，但您也可以使文本透明以獲得簡單的樣式效果。 – Ryan

謝謝大家！ – Gian

文本輸入不支持樣式化內容。故事結局。

一個常見的解決方案是使用contenteditable來代替。

來源

2012-05-05 20:25:29

連接到它的好工作，它使所有的差異。 :) – DanRedux

+1 ...馬特球...有計劃的人（100.000）:) –

作爲馬特說，<input> s不支持造型內容。但是，一種可能的解決方案可能是使用將包含輸入值的第二個<span>，並在此處顯示樣式化內容。如果這是不可接受的，那麼按照Matt的建議使用contenteditable。

來源

2012-05-05 20:32:25

這基本上是OP已經在做什麼。 –

如果僅僅是爲了不重要的美學，你可以在它後面對黑客樣式進行排序。

使背景和的<input>透明
文本再來<span>它
更新<span>的內容（有適當的造型），當<input>的內容改變

背後

Here's a quick demo.

來源

2012-05-05 20:53:48 Ryan

簡單而有效的解決方案。有沒有辦法看到光標並避開藍色邊框？謝謝 – Gian

@Gian：藍色邊框？我不確定你的意思......至於光標，恐怕沒有跨瀏覽器的解決方案。如果你只需要WebKit，可以使用'-webkit-text-fill-color：transparent;';否則，你幾乎不得不使用背景顏色來設計它，沒有別的。 – Ryan

我的意思是div字段周圍的藍色天空（標準邊框顯示焦點在元素上） – Gian

我如何在輸入文字時輸入文字樣式？

回答

相關問題