17

我在我的键盘事件处理程序中编写了一些代码来插入一个<br>以响应按下 Enter 键：

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

这仅在光标位于两个字母之间时才有效，如果它在最后我需要两个<br>-Elements。我可以检测到我是否在线路的末尾吗？或者 Enter 问题的其他一些工作想法？

我还尝试捕获正常的键事件（不按下 ctrl 键）并使用 JS 创建一个键盘事件，其中 Enter 键与 ctrl 一起按下。但这不起作用……</p>

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

4

2 回答 2

26

为了解决您的问题，请始终将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;
        }
      }
    });

});

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

于 2010-11-16T22:25:51.010 回答
0

我会将一个函数绑定到 keyup 事件以删除并更改为
使用 regEx。因此，即使它创建了奇怪的标记，它也会被修复。

使用 jQuery：

$('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});
于 2011-05-31T13:10:01.107 回答