contentEditable 不会将第一行换行到标签中

我有一个带有 contentEditable 属性集的 div。

我遇到的问题是我输入的第一行没有包含在标签中，但后续行却包含在标签中。

所以输入：

qwerty
zxcv
asdfg

结果是：

<div class="editable" contentEditable="true">
    qwerty
    <div>zxcv</div>
    <div>asdfg</div>
</div>

所以我需要qwerty线成为<div>qwerty</div>

我在 Chrome 中添加一个 div 时遇到了问题。仅当您的 div 包含 br 标签时它才有效：

<div class="editable" contentEditable="true">
  <div>
    <br>
  </div>
</div>

@nicholas_r是对的，删除可编辑div中的最后一个字符也会删除开头添加的div。您可以通过抓住最后一个“退格键”来避免这种情况。使用 jquery 的简单解决方案：

$(".editable").on('keydown', function(event) {
  if (event.keyCode === 8 && $(this).html() == '<div><br></div>') {
    event.preventDefault();
  }
}