Customizing Contenteditable behavior with javascript

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 preceeding 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.

Thanks,

Daniel

---

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

链接地址: http://www.djcxy.com/p/74322.html

上一篇: 在contenteditable块中分出和/或删除段落

下一篇: 使用javascript定制Contenteditable行为