How can I style text input as I type?

Question

Every time I type a character in an input field, I parse the expression so that I get:

1. An array of tokens, i.e., tokenArray=[2, *, COS, (, 4, )]
2. A cor

Answer 1

as Matt said, <input>s don't support styling content. However, one possible solution could be to use a second <span> that will contain the input's value, and show the styled content here. If that's not acceptable, then use contenteditable as Matt suggested.

Answer 2

Text inputs do not support styled content. End of story.

A common solution is to use contenteditable instead.

Answer 3

You can sort of hack styling behind it if it's just for unimportant aesthetics.

• Make the background and the text of the <input> transparent
• Have another <span> behind it
• Update the content of the <span> (with appropriate styling) when the <input>'s contents change

Here's a quick demo.