Chrome瀏覽器似乎忽略用戶選擇的一個contenteditable div

Question

我需要使contenteditablediv中的某些元素不可選，以便用戶在嘗試將插入符號移到原來的位置時跳過它們。顯而易見的解決方案似乎是給這些部件user-select: none風格。這在Firefox中運行得非常好，但不幸的是，在Google Chrome中完全失敗。

.ok { 
 
    -webkit-user-select: text; 
 
-moz-user-select: text; 
 
-ms-user-select: text; 
 
user-select: text; 
 
} 
 

 
.nope { 
 
-webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    }

<div contenteditable="true" readonly> 
 
    <span class="ok">One</span><span class="nope">Two</span><span class="ok">Three</span> 
 
    <div class="nope"> 
 
<span class="ok">One</span><span class="nope">Two</span><span class="ok">Three</span> 
 
    </div> 
 
    <span class="nope">One</span><span class="ok">Two</span><span class="nope">Three</span> 
 
    <div class="nope"> 
 
<span class="nope">One</span><span class="ok">Two</span><span class="nope">Three</span> 
 
    </div> 
 
</div>

有沒有什麼辦法讓這個在Chrome中工作，以及，抑或是一個難以逾越的限制嗎？

Answer 1

我也遇到過這個問題，並且找到了一份體面的工作。這並不漂亮，但通常可以完成工作。

如果連同user-select:none;那麼Chrome將會正確地處理CSS規則添加contenteditable="false"。那些元素將不再可選。

這個（除了必須修改HTML）的主要缺點是，如果在包裝div上添加contenteditable="false"，那麼它的所有子節點也將變爲不可編輯。您可以進一步嵌套另一個contenteditable="true"，這將允許嵌套的內容是可編輯的，但是不能從嵌套內容選擇到外部內容。

最終，在啓用contenteditable的情況下正確實施Chrome中的CSS規則將是最佳解決方案。 （可能是故意由於用戶選擇規範，參見下面註釋），使用contenteditable="false"的溶液

實施例（未在包裝的div）。

.ok { 
 
    -webkit-user-select: text; 
 
    -moz-user-select: text; 
 
    -ms-user-select: text; 
 
    user-select: text; 
 
} 
 

 
.nope { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<div contenteditable="true" readonly> 
 
    <span class="ok">One</span> 
 
    <span class="nope" contenteditable="false">Two</span> 
 
    <span class="ok">Three</span> 
 
    <div> 
 
    <span class="ok">One</span> 
 
    <span class="nope" contenteditable="false">Two</span> 
 
    <span class="ok">Three</span> 
 
    </div> 
 
    <span class="nope" contenteditable="false">One</span> 
 
    <span class="ok">Two</span> 
 
    <span class="nope" contenteditable="false">Three</span> 
 
    <div> 
 
    <span class="nope" contenteditable="false">One</span> 
 
    <span class="ok">Two</span> 
 
    <span class="nope" contenteditable="false">Three</span> 
 
    </div> 
 
</div>