Contenteditable = "true": create syntax for highlighted input form

Question

I am currently working with contenteditable = "true" to create a syntax highlighted input field. I am writing a jquery plugin that converts an <input> to a container <div contenteditable="true"> . In detail, it hides the <input> and inserts the <div> container after it.

In my fiddle, the highlight function is just a simple replacement function to highlight everything "AND in the container." Here is my fiddle:

http://jsfiddle.net/3Rhz8/2/

If the contents of the container are changed, the plugin should

• synchronize content with input content
• update syntax highlighting

In my example, I just listen to the keyup event. Now there is a problem when I want to update the syntax highlighting of the container. When the input is changed using .html() or the innerHTML container property, the cursor state is reset. Is there a way to prevent this, or can I save / restore the cursor position?

Answer 1

There is an ideal API for saving and restoring the cursor position: http://code.google.com/p/rangy/

This is a rangy API. All you have to do is

 var savedSel = rangy.saveSelection(); 

to keep the cursor position and then

 rangy.restoreSelection(savedSel); 

to restore the cursor position. Learn more about this here: http://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule