Html 禁用编辑后，红色拼写检查波形仍保留在chrome中

更新：这已被确定为Chrome中的一个bug。（谢谢@michael robinson）

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

我制作了一个jsfiddle来演示：

即使我在禁用

contentEditable

之前设置了属性

spellcheck=“false”

，它们仍然存在

---

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

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

您是否尝试过设置

显示：无（使用CSS），然后将显示设置回原来的状态？可能会强制Chrome重新绘制元素。。。（不起作用，请参阅下面的其他解决方案）

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

更新1：第一个解决方案不起作用，但第二个解决方案起作用。更新的JSFIDLE

更新2：上述解决方案使用innerHTML删除销毁事件处理程序。它还会破坏选择/插入符号位置

新方法使用jQuery的
clone（）
方法（在深度克隆模式下）来创建对象的副本（通过事件处理程序进行复制），并具有自定义函数来保存对选择的引用，然后进行恢复。请注意，选择保存/恢复功能在ie6-8中不起作用，但我认为这是可以接受的，因为问题被标记为Chrome。更新的JSFIDLE:
如果更新元素的内部HTML，拼写检查将重新计算，因此如果
spellcheck=“false”
或元素不可编辑，拼写检查将消失

例如：

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

这有很大的缺点：


引用任何元素的事件处理程序和javascript对象都将无效（元素内的所有元素都将从dom中有效删除）。这也意味着只使用javascript的属性，例如复选框的
不确定属性或任何其他自定义属性将被销毁

选择或插入符号位置被销毁
如果您有大量的内容，这对于cpu来说是一个非常重要的操作，尤其是在移动设备上

现在还可以，但我仍在寻找更好的答案。建议

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

试试这段代码，它应该可以工作。这是基于前面克隆内部HTML的相同答案

可以在FF和Chrome中使用。
将属性
拼写检查=“false”
添加到元素中对我有效。
如果不禁用contentEditable，您可以删除该属性吗？@BrianNoah我会尝试一下，尽管contentEditable属性的值似乎是
false
@BrianNoah-Nah，似乎不会改变拼写检查下划线的损坏行为。不过，谢谢。我想试试，你试过autocorrect=“false”属性了吗？这是chrome中的一个bug，在这里有报道：啊，谢谢-我应该提到的是，即使在它们出现后设置了拼写检查=“false”，它们也会持续存在。创建一个与旧元素相同的新元素可以工作-我用一个例子更新了JSFIDLE（请参阅编辑后的答案）。嘿，感谢heaps创建了一个JSFIDLE来演示，我对此表示感谢。不幸的是，这个解决方案有一些显著的缺点，我在下面的回答中概述了这些缺点：@aaaidan已更新，删除了您的两个缺点。我担心这可能仍然需要大量的cpu（如果不是更多的话），但它确实解决了其他问题。太棒了！这是一个很好的解决方法。我不知道深度克隆会保留事件，谢谢！我在删除squiggs时对强制contentEditable行进行了评论，并在离开编辑模式时删除了行：再次参见上文。我无法降低cpu密集度（有可能还有另一种方法可以做到这一点），但新方法将保留事件处理程序并恢复选择。很好，这是一种紧凑且易于理解的方法。但不幸的是，它将破坏内容中存在的任何事件处理程序。哈哈，欢呼！这必须现在修复。我会检查。干杯