Contenteditable div 删除和创建新元素

Question

我有一个将 contenteditable 设置为 true 的 div，然后动态添加了另外两个 div。例如

<div contenteditable='true'>
    <div id='1'>
        <span>Something Editable</span>
        <span contenteditable='false'>Something NOT Editable</span>
    </div>
    <div id='2'>
        <span>Second Something Editable</span>
        <span contenteditable='false'>Something NOT Editable</span>
    </div>
</div>

如果我的光标位于显示 Second Something Editable 的跨度中，并且我按下退格键，它会将此跨度中的文本移动到第一个 div，如下面的代码，这是我不想要的。

<div contenteditable='true'>
        <div id='1'>
            <span>Something Editable</span>
            <span contenteditable='false'>Something NOT Editable</span>
            Second Something Editable.
        </div>
        <div id='2'>
            <span contenteditable='false'>Something NOT Editable</span>
        </div>
    </div>

再一次，如果我在第一个 div (div id=1) 中的 Second Something Editable 行上按 Enter，它会创建一个 id=1 的新 div 并将内容放在那里。谁能告诉我如何解决这个问题。谢谢

Answer 1

为了解决您的第一个问题，我只需将 contenteditable 标志直接添加到 <span> 应该是可编辑的，而不是它的父容器。

第二个问题有点棘手。您可以通过添加 keydown 侦听器、拦截返回键并调用 event.preventDefault() 来阻止浏览器执行默认操作来避免创建新的 <div>。

更新：

如果您不想将父 <div> 设置为可编辑，您可以使用与返回新闻相同的技巧。这次我们只需要拦截退格键（键码 8）并检查光标当前是否位于行首 - 这样用户仍然可以删除文本。

这是一个例子：

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
    if (e.keyCode == 8 && document.getSelection().anchorOffset == 0) {
    e.preventDefault();
  }
});

<div contenteditable='true'>
  <div id='1'>
    <span >Something Editable</span>
    <span contenteditable='false'>Something NOT Editable</span>
  </div>
  <div id='2'>
    <span contenteditable='true'>Second Something Editable</span>
    <span contenteditable='false'>Something NOT Editable</span>
  </div>
</div>