使用Javascript自定义Contenteditable行为

当前在Firefox下，当我在

contenteditable

段落中按return键时，它会插入一个

br

标记，创建一个新段落标记，然后在该新段落中插入一个

br

标记。我想修改行为，以便

• Shift+enter=br标记（这已经是默认值）
• 输入与当前元素重复，可以是p、li、h1。。等等，并删除任何尾随或前导（W3C规范要求一些我可以使用的事件，但我根本不确定如何实现它们
• 元素开头的退格将使其与前面的同级元素（如果存在）合并
• 元素末尾的Delete将与以下同级元素（如果存在）合并

我尝试过捕捉按键并检查返回键、删除键和退格键，但似乎无法准确获取当前插入符号位置，或者在覆盖它时无法阻止默认行为。 如果有人知道如何

• 获取和/或设置内容可编辑段落中的当前插入符号位置
• 防止contenteditable的默认行为
• 附上W3C建议要求的事件

---

也许有人知道某个用户代理（浏览器）已经以这种方式运行。这是可以接受的。

要编辑内容可编辑的行为，我会这样做：

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

---

谢谢，这基本上就是我所尝试的，但有一个关键的区别。我把e.preventDefault作为堆栈中的最后一个调用，你把它放在第一位。当放在最后一位时，它是无效的。不知道为什么，但它是无效的。谢谢你的回答，这让我回到了业务中。我仍然有一些问题，但会再次尝试它们。当插入符号不在可编辑文本的末尾。是的，我知道，您需要使用类似这样的内容：

this.html（this.html（）.substring（anchorOffset）+“
”+this.html（）.substring（0，anchorOffset））如果可编辑的元素包含一个文本节点，那么在插入一个<代码> > BR> <代码>的情况下，这是唯一有效的。对于一般情况来说，这是不可行的。这是完全可能的，但这将是相当困难的，需要大量代码。
document.getSelection().anchorOffset