子元素的內容可編輯、奇怪的行為，而不是空白獨立？

Question

我一直在玩contenteditable字段，並且遇到了一個我無法弄清楚的奇怪行為。

查看這個特定問題的小提琴。

我有兩個相同的contenteditable div。 它們都有相同的<span>子元素，后跟一個空白字符（否則會出現胡蘿卜問題）。 兩者之間的唯一區別是第二個 div 已“美化”，並通過在新行上縮進<span>使其更具可讀性。

<div style="margin-bottom: 15px;" contenteditable="true"><span class="lead" contenteditable="false">Something something</span>&#8203;</div>


<div contenteditable="true">
  <span class="lead" contenteditable="false">Something something</span>&#8203;
</div>

在兩個 div 中嘗試這個...

1. 將胡蘿卜放在內容的右端（即空白字符之后）
2. 然后按退格鍵幾次

您會注意到在頂部（第一個） contenteditable div 中，您可以刪除<span>元素，就好像它是一個巨大的字符。 您還應該注意到，在第二個 div 中，任何退格都無法清除它。 至少在 Safari 中不是。

那么什么給！？ 我認為 HTML 是獨立於空格的 - 為什么兩者的行為不同？

查看源代碼，它們的標記略有不同......

......但我仍然應該知道為什么會有任何區別。

我希望它是可刪除的，所以解決方案顯然只是使用以前的版本，但仍然很好奇為什么會存在這個問題。

還！ 如果你碰巧是一個contenteditable大師，我一直在這里與另一個問題作斗爭。 歡迎對此提供任何幫助！

Answer 1

HTML 不是空白獨立的； 相反，多個空白字符被視為與一個空格符號相同。 這里的問題不是關於contenteditable ，而是關於美化這里實際 DOM 的變化。 看看這個小提琴，它說明了這個問題。 HTML：

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

<div style="clear: both;"></div>

<div class="left"></div><div class="center"></div><div class="right"></div>

CSS：

.left, .right { width: 25%; }
.center { width: 50%; }
.left, .right, .center { display: inline-block; height: 1em; }
.left { background-color: red; }
.center { background-color: green; }
.right { background-color: blue; }

正如您所看到的，一個換行符（等於一個空格）在塊之間留出一些空間，而當根本沒有空格時，一切都“按預期”工作。

不過，我不得不承認，這種行為很奇怪：當 DOM 檢查器打開時，它會顯示我（在 Chrome 中）

（此處為零寬度空格字符），如果我將光標放在末尾並按一次退格鍵，則獲得相同的 DOM 元素（好吧，我也嘗試過刪除邊距）：

但是，在第二種情況下，backpac 無法按預期工作。 刪除不可編輯跨度的唯一方法是在它之后添加一個字符，然后將光標移動到它之前並刪除。 這可能是一個錯誤，盡管它存在於 Safari（如您所說）和 Chrome（根據我的測試）中。

我認為這將在瀏覽器供應商的支持下進一步討論。 順便說一句，在 FireFox 中，這表現得非常一致：在兩種情況下都不能刪除span ，在第一個中它后面沒有任何內容，而在第二個中span后面有一個空格（可以刪除，of'課程）。