如何防止在按住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標籤內的跨度。所以任何人都可以解釋一下，如果光標（當在瀏覽器中輸入這個範圍時）就在span標籤之後，即在關閉範圍標籤之後，退格鍵不起作用。

更簡單的是，一旦光標超出範圍，退格鍵不應該再次移動到範圍。請幫助一個簡單的例子在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; 
}