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>

如果我的 cursor 在显示 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) 中按 enter，它将创建一个 id=1 的新 div 并将内容放在那里。 谁能告诉我如何解决这个问题。 谢谢

Answer 1

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

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

更新：

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

这是一个例子：

 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>