Replacing text with image of letter as it's being typed in an input box

Question

Is it possible to replace text that is typed in an input box with an image that represents the letter using javascript or CSS? For example, if you have an input box, and the user types in "U", then instead of the text showing up in the input box, an IMG representing U is placed over the corresponding area?

Is this even possible? Are you able to do things like move the location of the caret within an input box even if there is no text preceding it?

Answer 1

I think you could do it, but I don't see why you'd even use an input object if you don't want to actually display text. If you're going to display your own text with images (I have no idea why), then you may as well just build your own control that responds to letters, navigation and delete keys and inserts images as characters are typed.

You would need a set of precached graphics for every letter you could type so you could just create a new image element and insert it each time a character was typed.

Why are you doing this?