contentEditable不会在标记中包装第一行

Question

我有一个div属性contentEditable设置.

我遇到的麻烦是我输入的第一行不会包含在标签中,但后续的行会包含.

所以输入:

qwerty
zxcv
asdfg

结果是:

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

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

Answer 1

我在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();
  }
}

Answer 2

div如果您从一个包含如下内容的元素开始：

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

您输入的第一行最终将被包装在div.

更新：

这是特定于浏览器的。虽然在问题发布时它确实在大多数浏览器中工作，但它不一定在最新的浏览器版本中工作。最好的判断方法就是测试一下。