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

【问题标题】：Red spellcheck squiggles remain in chrome after editing is disabled禁用编辑后，红色拼写检查曲线仍保留在 chrome 中
【发布时间】：2012-09-30 12:16:23
【问题描述】：

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

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

我做了一个 jsfiddle 来演示：jsfiddle demo.

即使我在禁用contentEditable 之前设置了属性spellcheck="false"，它们仍然存在。

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

【问题讨论】：

不禁用 contentEditable ，而是删除属性怎么样？
@BrianNoah 我会试一试，虽然 contentEditable 属性的值似乎是false
@BrianNoah Nah，似乎并没有改变拼写检查下划线的损坏行为。不过，谢谢。
我想试试，你试过 autocorrect="false" 属性吗？
这是 chrome 中的一个错误，已在此处报告：Issue 155781

标签： html google-chrome contenteditable spell-checking browser-bugs

【解决方案1】：

将属性spellcheck="false" 添加到元素对我有用。

【讨论】：

哈哈，欢呼！现在必须解决这个问题。我会检查。干杯

【解决方案2】：

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

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

更新 1：第一个解决方案无效，但第二个解决方案有效。更新了 JSfiddle http://jsfiddle.net/RegVn/6/

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

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

【讨论】：

创建一个与旧元素相同的新元素 - 我已经用一个示例更新了 JSfiddle（请参阅编辑后的答案）。
嘿，感谢大家创建了一个 jsfiddle 来演示，我很感激。不幸的是，这个解决方案有一些明显的缺点，我在下面的回答中概述了这些缺点：stackoverflow.com/a/12888119/26331
@aaaidan 更新以消除您的两个缺点。恐怕这可能仍然是 CPU 密集型的（如果不是更多的话），但它确实解决了其他问题。
太棒了！这是一个很好的解决方法。我不知道深层克隆会保存事件，谢谢！我评论了删除 squiggs 时强制 contentEditable 的行，并在离开编辑模式时删除了行：jsfiddle.net/RegVn/26

【解决方案3】：

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

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

适用于 FF 和 Chrome。

【讨论】：

太棒了，它简洁易懂。但不幸的是，它将破坏该内容存在的所有事件处理程序。

【解决方案4】：

如果您更新元素的 innerHTML，拼写检查将被重新评估，因此如果 spellcheck="false" 或元素不可编辑，它们将消失。

例如：

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

这有很大的缺点：

引用任何元素的事件处理程序和 javascript 对象都将失效（元素内的所有元素都有效地从 dom 中删除）。这也意味着只有 javascript 的属性（例如复选框的 indeterminate 属性或任何其他自定义属性）将被销毁。
选择或插入符号位置被破坏。
如果您有大量内容，这对 cpu 来说是一项不平凡的操作，尤其是在移动设备上。

目前还可以，但我仍在寻找更好的答案。有什么建议吗？

【讨论】：

见上文。我不能减少 cpu 密集度（可能有另一种方法可以做到这一点），但新方法将保留事件处理程序并恢复选择。

【解决方案5】：

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

spellcheck="false"

【讨论】：

啊，谢谢 - 我应该提一下，即使在它们出现后设置了 spellcheck="false" ，它们仍然存在。