禁用編輯后，紅色拼寫檢查曲線仍保留在chrome中

Question

更新：這已被確定為Chrome中的錯誤。 （謝謝@ michael-robinson）

在Chrome（至少是v22）中，我注意到即使在禁用了contentEditable之后，拼寫檢查“紅色波浪形”下划線仍有可能保留。

我做了一個jsfiddle來演示： jsfiddle demo 。

即使我在禁用contentEditable之前設置屬性spellcheck="false" ，它們仍然存在。

任何人都知道如何解決或解決這個問題的好方法？ 理想情況下，當內容可編輯時，我會保留內置的拼寫檢查功能。

Answer 1

您是否嘗試過設置display: none （使用CSS），然后將顯示設置回原來的樣子？ 可能會強制Chrome重繪元素...... （沒用，請看下面的其他解決方案）

或者，您可以創建元素的副本（但具有contenteditable disabled），將其放在原始元素之后並刪除原始元素。

更新1 ：第一個解決方案不起作用，但第二個解決方案不起作用。 更新了JSfiddle http://jsfiddle.net/RegVn/6/

更新2 ：上面的解決方案使用innerHTML刪除破壞事件處理程序。 它還會破壞選擇/插入位置。

新方法使用jQuery的clone()方法（在深度克隆模式下）創建對象的副本（通過事件處理程序進行復制），並具有自定義函數以保存對選擇的引用，並在之后恢復它。 請注意，選擇保存/恢復功能在ie6-8中不起作用，但我認為這是可以接受的，因為問題標記為Chrome。 更新了JSfiddle： http ： //jsfiddle.net/RegVn/23/

Answer 2

spellcheck屬性指定元素是否要檢查其拼寫和語法：

拼寫檢查=“假”

Answer 3

如果更新元素的innerHTML，將重新評估拼寫檢查，因此如果spellcheck="false"或元素不可編輯，它們將消失。

例如：

myElement.innerHTML = myElement.innerHTML + " "; // add a space to force a change.

這有很多缺點：

• 引用任何元素的事件處理程序和javascript對象將失效（元素中的所有元素都將從dom中有效刪除）。 這也意味着將銷毀僅限javascript的屬性，例如復選框的indeterminate屬性或任何其他自定義屬性。
• 選擇或插入位置被破壞。
• 如果你有大量的內容，這對於cpu來說是一個非常重要的操作，特別是在移動設備上。

現在這沒關系，但我仍然在尋找更好的答案。 建議？

Answer 4

將元素spellcheck="false"到元素中對我有用。

Answer 5

var content = $("#editor").html();
$("#editor").html("")
$("#editor").attr('spellcheck', 'false');
$("#editor").html(content);

嘗試這個代碼，它應該工作。 這是基於克隆內部HTML的相同的先前答案。

適用於FF和Chrome。