Javascript 如何在键入时设置文本输入的样式？

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

令牌数组，即令牌数组=[2，*，COS，（，4，）]

令牌类型的对应数组，即令牌类型=[NUMBER，OPERATOR，FUNCTION，（，NUMBER，）]

我需要根据每个令牌各自的令牌类型设置每个令牌的样式（例如为每个令牌指定不同的颜色）

我已经能够轻松地在不同的

中设置输入文本的动态副本样式（而不是输入文本本身，这是我请求帮助的内容），如下所示：

JavaScript:

函数processExpression（）{
var userInput=document.getElementById（'inputText'）。值；
var resultOutput=parse（userInput）；//这将生成上述两个数组
for（令牌数组中的i）
newHTML++=“令牌数组[i]+”；
document.getElementById（'styledExpression'）。innerHTML=newHTML；
}

HTML:

如何在我键入的输入字段中直接设置输入文本的样式？ 有JavaScript解决方案吗

更新

蒂姆对这个问题的回答提供了一些很好的帮助

您将如何修改以解决在每次按下键时，都会重新解析整个可编辑对象的问题？例如，假设您键入“=if（AND（3=2，A1:A4，或（0,1）），5,6）”，并且在每次按下键时，可编辑项都会以编程方式重新写入（请参见上面的标记描述），而我丢失了光标

---

此解决方案如何可以忽略标记、字符或节点的类型，而只保存和恢复在按下键之前的绝对光标（从起始位置）位置？

文本输入不支持样式化内容。故事结束了

---

一个常见的解决方案是改用。

正如马特所说，

不支持样式化内容。但是，一个可能的解决方案是使用第二个

，它将包含输入的值，并在此处显示样式化的内容。如果这是不可接受的，那么按照马特的建议使用

contenteditable

。

如果只是为了不重要的美学，你可以在其背后进行某种风格的修改

• 使
  的背景和文本透明
• 后面有另一个

• 当
  的内容更改时，更新
  的内容（使用适当的样式）

---

事实上，我几小时前才开始做这样的事情！这并不容易，但到目前为止我所掌握的可能会帮助您开始：或者，您也可以尝试使

透明化，并对其背后的内容进行样式化。这对背景色最有效，但您也可以使文本透明以获得简单的样式效果。链接到它做得很好，它使一切都不同。：）+为…马特·鲍尔。。。有计划的人（100.000）：）简单有效的解决方案。有没有办法看到光标并避开蓝色边框？Thanks@Gian：蓝色边框？我不知道你说的是什么意思。。。至于光标，恐怕没有跨浏览器的解决方案。如果您只需要WebKit，请使用

-WebKit文本填充颜色：透明；否则，您几乎只能使用背景色而不是其他颜色来设置样式。我指的是div字段周围的蓝天（显示元素焦点的标准边框）@Gian：当然，只需在
上设置
大纲：无
。