javascript - 在javascript中按退格键时如何防止光标返回？

Question

请考虑以下html。

<div id="container" contenteditable="true">
<p>This is a paragraph <span class="test">'this text is inside the span'</span> 
        This is another paragraph afer the span tag inside this p tag
    </p> </div>

如您所见，p 和 span 标签在浏览器中是可编辑的。这意味着我们可以在浏览器中写入。现在我的问题是关于 p 标签内的跨度。所以任何人都可以解释如果光标（在浏览器中输入这个跨度时）就在跨度标记之后，即在结束跨度标记之后，退格键不应该起作用。

更简单，一旦光标超出跨度，退格键不应该再次移动它以进入跨度。请帮助一个简单的javascript示例。

Answer 1

如果你可以稍微改变你的 DOM，你可以在没有 Javascript 的情况下做到这一点。

看到那个Fiddle

<div id="container">
    <span  contenteditable="true">This is a paragraph</span>
    <span class="test" contenteditable="true">'this text is inside the span'</span>
    <span contenteditable="true">This is another paragraph afer the span tag inside this tag</span>
</div>

CSS 仅用于显示不同的跨度

.test
{
    background-color: red;
}