Question

每次我在输入字段中输入一个字符时，我都会解析表达式，以便得到：

一系列令牌，即tokenArray = [2，*，COS，（，4，）]
相应的令牌类型数组，即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解决方案？

更新

replace innerHTML in contenteditable div

你如何修改http://jsfiddle.net/2rTA5/2/来解决每个keydown，一个重新整理整个可编辑的东西？例如，假设您键入“= if（AND（3 = 2，A1：A4，OR（0,1）），5,6）”，并且在每次keydown时，editable都会以编程方式重写（请参阅上面的标记说明））我失去了光标。

此解决方案如何忽略令牌或字符或节点的类型，只需保存并恢复keydown之前的绝对光标（从头开始）？

Answer 1

文字输入不支持样式内容。故事结束。

常见的解决方案是使用contenteditable代替。

Answer 2

正如Matt所说，<input>不支持样式内容。但是，一种可能的解决方案是使用包含输入值的第二个<span>，并在此处显示样式化内容。如果这是不可接受的，那么请按照Matt的建议使用contenteditable。

Answer 3

如果只是为了不重要的美学，你可以在它背后破解造型。

制作<input>透明
背后有另一个<span>
当<span>的内容发生变化时，更新<input>的内容（包含适当的样式）

Here's a quick demo.

如何键入文本输入样式？

3 个答案: