Question

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

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;
        }
      }
    });

});

在Apple OS X上测试谷歌Chrome 7，Mozilla Firefox 3.6，Apple Safari 5）。尝试使用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);
});

在contenteditable上按Enter键，而不是<div> </div>

2 个答案: