通过在 contenteditable 上按 Enter 来制作 <br> 而不是 <div></div>答案

【问题标题】：Make a <br> instead of <div></div> by pressing Enter on a contenteditable通过在 contenteditable 上按 Enter 来制作 <br> 而不是 <div></div>
【发布时间】：2011-03-06 01:31:46
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript html contenteditable

【解决方案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;
        }
      }
    });

});

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

【讨论】：

不需要range.collapse(false);：你已经定位了范围的开始和结束。 IERange 的替代方案是我自己的 Rangy (code.google.com/p/rangy)，它在概念上相似但更充分地实现（并积极维护）。

【解决方案2】：

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

使用 jQuery：

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

【讨论】：

1) 必须使用 .html() 而不是 .text() 2) 它可以工作，但光标保留在
之前，而不是之后（按 Enter 后）。