禁用编辑后，红色拼写检查曲线仍保留在chrome中

Question

更新：这已被确认为Chrome中的错误。 （谢谢@ michael-robinson）

在Chrome中（至少是v22），我注意到即使在禁用了contentEditable之后，拼写检查“红色波浪形”下划线也可能保留。

我做了一个jsfiddle演示：jsfiddle demo。

即使我在禁用spellcheck="false"之前设置了属性contentEditable，它们也会保留。

任何人都知道如何解决或解决这个问题的好方法？理想情况下，当内容可编辑时，我会保留内置的拼写检查功能。

Answer 1

您是否尝试过设置display: none（使用CSS），然后将显示设置回原来的状态？可能会强制Chrome重绘元素... （不起作用，请参阅下面的其他解决方案）

或者，您可以创建元素的副本（但具有contenteditable disabled），将其放置在原始元素之后并删除原始元素。

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

UPDATE 2 ：上面的解决方案使用innerHTML来删除销毁事件处理程序。它还会破坏选择/插入位置。

新方法使用jQuery的clone()方法（在深度克隆模式下）创建对象的副本（通过事件处理程序复制），并具有自定义函数以保存对选择的引用，并将其还原然后。请注意，选择保存/恢复功能在ie6-8中不起作用，但我认为这是可以接受的，因为问题标记为Chrome。更新了JSfiddle：http://jsfiddle.net/RegVn/23/

Answer 2

spellcheck属性指定元素是否要检查其拼写和语法：

spellcheck="false"

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。