Customizing Contenteditable behavior with Javascript

Question

Currently under Firefox when I press return in a contenteditable paragraph it inserts a br tag creates a new paragraph tag and then puts a br tag inside that new paragraph. I would like to modify the behavior such that

• Shift+enter = br tag (this is already the default)
• Enter duplicates the current element be it p, li, h1.. etc. and removes any trailing or leading (the W3C specification require some events that I could use, but I am not at all sure how implement them.
• Backspace at the beginning of an element will merge it with the preceding sibling if it exists
• Delete at the end of an element will merge it with the following sibling if it exists.

I have tried trapping keypress and checking for the return, delete, and backspace keys, but I can't seem to get the current caret position accurately or to prevent the default behavior if I am overriding it.

I would find it most helpful if anyone out there knows how to..

• Get and/or Set the current caret position in a contenteditable paragraph.
• prevent the default behavior of contenteditable
• attach the events required by the W3C recommendation. http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Perhaps someone even knows of a user agent (browser) that already behaves in this way. That is acceptable.

Answer 1

To edit content-editable behavior, I'd do this:

$("#editable").bind("keypress",function(e){
   if(e.keyCode==13 && e.shiftKey){ //enter && shift
      e.preventDefault(); //Prevent default browser behavior
      this.html(this.html+"<br>");
   }
});

You can edit what's inside the html function. PS: I don't remember if jQuery has the shiftKey and keyCode on the event object...if anything goes wrong change e to e.originalEvent.

To Get carret position: In non-IE:

document.getSelection().anchorOffset