Question

I’m trying to write a lightweight html/javascript widget which lets me colour each character as it is entered. I was thinking that the way to do it would be to have an input field that reacted to events, but whose actual display was overlaid by an html div that reads the input field’s value, highlights it, and writes it out. Is this the recommended way to do things? Is there a library out there that already implements this, and takes care of any fiddly details I might not have thought of?

edit: searching for ways to implement cronoklee’s contentEditable idea brought up this nice article: http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm

Answer 1

This might be of interest:
http://www.w3.org/TR/html5/editing.html#contenteditable

I would probably set up a contenteditable div, and call a javascript function on keypress that wraps the last inputted character in styled span tags. If you need to submit the inputted data, set up a input type=’hidden’ and populate that on keypress. No need to overlay one on the other!

EDIT:
I just realised (months later!) that you can simply use div.textContent to get the content of the input. That will just show the text without styling so no need for that extra input field to catch characters.