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

Question

我在键盘事件处理程序中编写了一些代码,<br>以便在按下Enter键时插入一个代码:

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

这只有在光标在两个字母之间时才有效,如果它在最后我需要两个 - <br>元素.我可以检测到我是否在一条线的末端？或者输入问题的其他一些工作想法？

我还尝试捕捉正常的键事件(按下按下的ctrl-Key)并使用JS创建键盘事件,其中Enter键与ctrl一起按下.但这不起作用......

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

Answer 1

为了解决您的问题,请始终将br元素作为您的contenteditable div的最后一个元素.这将确保在注入br元素时的可预测行为与注入div元素的浏览器默认值.您可以在keyup和mouseup上检查lastChild以确保它是一个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;
        }
      }
    });

});

在带有谷歌Chrome 7,Mozilla Firefox 3.6,Apple Safari 5的Apple OS X上进行测试.尝试使用ierange使其在Windows Internet Explorer中工作.