7

入力フィールドに文字を入力するたびに、式を解析して次のようにします。

  1. トークンの配列、つまり、tokenArray = [2、*、COS、（、4、）]
  2. 対応するトークンタイプの配列、つまり、tokenType = [NUMBER、OPERATOR、FUNCTION、（、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ソリューションはありますか？

アップデート

contenteditable divのinnerHTMLを置き換えるという質問に対するTimの回答は、いくつかの良い助けになります。

http://jsfiddle.net/2rTA5/2/をどのように変更して、キーを押すたびに編集可能なもの全体を再解析する場合を解決しますか？たとえば、「= if（AND（3 = 2、A1：A4、OR（0,1））、5,6）」と入力すると、キーを押すたびに、編集可能なものがプログラムで書き直されます（上記のトークンの説明を参照）。 ）そして私はカーソルを失います。

このソリューションは、トークン、文字、またはノードのタイプを無視し、キーダウンの前にあった絶対カーソル（の先頭から）の位置を単純に保存および復元するにはどうすればよいですか？

4

3 に答える 3

6

テキスト入力は、スタイル付きコンテンツをサポートしていません。話の終わり。

一般的な解決策は、contenteditable代わりに使用することです。

于 2012-05-05T20:25:29.587 に答える
4

Matt が言ったように、<input>s はスタイリング コンテンツをサポートしていません。ただし、考えられる解決策の 1 つ<span>は、入力の値を含む秒を使用し、スタイル設定されたコンテンツをここに表示することです。それが受け入れられない場合はcontenteditable、マットが提案したように使用してください。

于 2012-05-05T20:32:25.150 に答える
2

重要でない美学のためだけであれば、その背後にあるスタイリングをハックすることができます.

  • 背景と文字を<input>透明にする
  • <span>その後ろに別のものを持っている
  • のコンテンツが変更さ<span>れたときに、(適切なスタイルで)のコンテンツを更新します<input>

ここに簡単なデモがあります。

于 2012-05-05T20:53:48.810 に答える