I’m currently fiddling around with contenteditable=”true” to create a syntax hilighted input box. I’m writing a jquery plugin that converts a <input> tag to a <div contenteditable="true"> container. In detail, it hides the <input> and inserts the <div> container after it.
In my fiddle, the hilight function is just a simple replace function to hilight all ‘AND’s in the container. Here’s my fiddle:
If the content of the container is changed, the plugin has to
- sync the content with the content of the input
- update the syntax hilighting
In my example, I’m just listening to the keyup event. Now, there’s a problem when I want to update the syntax hilighting of the container. When the input is changed via .html() or the container’s innerHTML property, the cursor state resets. Is there a way to prevent this, or can I save/restore the cursor position ?
