CONTENTEDITABLE：防止內部元件被刪除

<div class="example" contenteditable="true"> 
    <div class="inside">Some content</div> 
</div>

當我刪除「Some content」，然後class="inside" DIV也被刪除。內容被刪除後，有沒有辦法阻止內部div被刪除？

例如，這是我努力使一旦內容被刪除了的樣子。

<div class="example" contenteditable="true"> 
    <div class="inside"></div> <!-- The div is not deleted --> 
</div>

我環顧四周，但似乎並沒有一個明確的答案。

任何幫助將不勝感激。

謝謝。

2016-12-01 steve Kim

https://jsfiddle.net/rzm156px/也不會被刪除。 –

嗯這很奇怪。在Chrome瀏覽器中，除了頂部帶'contenteditable' attr的div以外，所有內容都會被刪除。 –

號碼在你的CSS中的東西打破代碼。 –

.inside, .example { 
 
    display: inline; 
 
}

<div class="example" contenteditable="true"> 
 
    <div class="inside">Some content</div> 
 
</div>

也許有一個風格，是行內元素。

由於寬度將是0％時刪除該內容。您不能再次點擊或添加任何內容。

所以，我的解決方案將是

.inside, .example { 
    display: block; 
}

，如果你願意，你可以指定寬度。 :)

.inside, .example { 
 
    display: block; 
 
}

<div class="example" contenteditable="true"> 
 
    <div class="inside">Some content</div> 
 
</div>

2016-12-01 02:13:58

如果您檢查元素（在Chrome中），則在這兩種情況下，內部div都會被刪除。 –

@steveKim是的。現在，我明白你的問題。對不起，但爲什麼你不想使用文本框有特別的原因嗎？ –

謝謝你的幫助。我想過使用textarea，但我需要在輸入字段內部有一些html標記，而textarea不允許使用html元素。（爲了更好地控制輸入數據）。 –

回答