禁用编辑后，红色拼写检查曲线仍保留在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。