How do I format an HTML text field to use multiple styles?

I'm looking for a way to apply some formatting to a single-line text input field in JavaScript. It would work like this:

The user types in a formula, such as:

(7 + 3) ^ x

As the user types, my code would format it using colour to look like this:

I can do the necessary parsing but I don't know how to apply these styles to the user's text as they edit.

I've been struggling to find the right thing to Google for. My searches mostly lead me to full-blown text editors.

Is there such a component? If not, can I achieve this with a <input type=开发者_Go百科"text"...> field?

Out of curiosity I built this: http://jsfiddle.net/hunter/npbDL/

This catches key strokes and inserts a span-wrapped character into an element. If the character maps to an item in the character-to-class collection it also gives that span the class specified.

It also handles enter and backspace.

You can probably take it from there...

I think the only way you can achieve the styling you want is by wrapping HTML tags around individual characters then styling the tags, and I don’t think you can do that inside an <input type="text">.

There is the widely-supported contenteditable attribute which makes most elements editable, but I’m not sure that it allows this either. If no-one else provides a better answer, you might want to view source on the last example here: http://www.hyperwrite.com/Articles/contenteditable.aspx

You can't format a text field with various colors. You might be able to use colors in WYSIWYG editors... or Flash.

I don't think you can change of individual characters in any <input> nor <textarea>. Look into source code of Etherpad for example - it uses similar system (not exactly the same - it highlights other stuff) and it might help you.