通过在contenteditable上按Enter键来创建<br>，而不是<div></div>

Question

我已经在键盘事件处理程序中编写了一些代码，以便在按Enter键时插入<br>：

event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');

这只适用于当光标在两个字母之间，如果它在末尾我需要两个<br>-Elements。我能检测到我是否在行的末尾吗？或者其他一些解决Enter问题的有效想法？

我还尝试捕获普通的键事件(没有按下ctrl -键)，并使用JS创建一个键盘事件，其中Enter键与ctrl键一起被按下。但这不管用，…

它只需要在Webkit/Safari…中工作

Answer 1

为了解决您的问题，请始终保留一个br元素作为可内容编辑的div的最后一个元素。这将确保在注入br元素时可预测的行为，而不是浏览器默认的注入div元素。您可以检查lastChild on keyup和mouseup，以确保它是一个br元素。假设您有一个如下所示的文档：

<div id="editable" contenteditable="true"></div>

您可以使用以下JavaScript (w/ jQuery 1.4+)将br元素保留为最后一个元素，并注入br元素而不是div div：

$(function(){

  $("#editable")

    // make sure br is always the lastChild of contenteditable
    .live("keyup mouseup", function(){
      if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
        this.appendChild(document.createChild("br"));
      }
    })

    // use br instead of div div
    .live("keypress", function(e){
      if (e.which == 13) {
        if (window.getSelection) {
          var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement("br");
          range.deleteContents();
          range.insertNode(br);
          range.setStartAfter(br);
          range.setEndAfter(br);
          range.collapse(false);
          selection.removeAllRanges();
          selection.addRange(range);
          return false;
        }
      }
    });

});

在带有Google Chrome 7、Mozilla Firefox 3.6、Apple Safari 5的Apple OS X上测试)。尝试使用ierange使其在Windows Internet Explorer中工作。

Answer 2

我会将一个函数绑定到keyup事件，以删除并更改为

使用regEx。因此，即使它创建了奇怪的标记，它也会被修复。

使用jQuery：

$('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});