禁用编辑后，Chrome中仍然存在红色拼写检查波浪线

Question

更新：这已被确认为Chrome的一个bug。(感谢@michael-robinson)

在Chrome（至少是v22）中，我注意到即使contentEditable已被禁用，拼写检查“红色拼写下划线”仍然可能存在。

我制作了一个jsfiddle以进行演示：jsfiddle demo。

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

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

- aaaidan

---

那么，不禁用contentEditable，你移除属性怎么样？ - Brian Noah

这是Chrome的一个错误，并已在此处报告：[问题155781]（https://code.google.com/p/chromium/issues/detail?id=155781&q=spellcheck&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20Modified） - Michael Robinson

太棒了，我确实提交了那个，但没有意识到他们已经采纳了它... - aaaidan

这个漏洞已经存在了3年，还没有解决吗？ - Kevin

哇，这么久了？显然不在路线图上！ - aaaidan

Answer 1

你试过设置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/

- Nico Burns

---

创建一个与旧元素相同的新元素是可行的 - 我已经更新了JSfiddle并提供了一个示例（请参见编辑后的答案）。 - Nico Burns

嘿，非常感谢您创建了一个jsfiddle来演示，我很感激。不幸的是，这个解决方案有一些显著的缺点，我在下面的答案中进行了说明：https://dev59.com/TGnWa4cB1Zd3GeqP0Gjn#12888119 - aaaidan

@aaaidan 更新后移除了你提到的两个缺点。恐怕这仍然需要相当大的 CPU 资源（如果不是更多），但它确实解决了其他问题。 - Nico Burns

太棒了！这是一个绝妙的解决方法。我不知道深度克隆可以保留事件，谢谢！我已经注释掉了强制contentEditable的行，删除了离开编辑模式时的行：http://jsfiddle.net/RegVn/26/ - aaaidan

Answer 2

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

- besrabasant

---

哈哈，欣喜！这个问题现在必须解决。我会检查的。干杯 - aaaidan

Answer 3

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

例如：

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

这样做有显著的缺点：

• 事件处理程序和引用任何元素的javascript对象将无效（元素内的所有元素实际上都从dom中删除）。这也意味着仅限于javascript的属性，例如复选框的indeterminate属性或任何其他自定义属性，都将被销毁。
• 选择或插入符位置被破坏。
• 如果您有大量内容，则对于CPU来说，这是一个非微不足道的操作，特别是在移动设备上。

现在这样做还可以，但我仍在寻找更好的答案。有什么建议吗？

- aaaidan

---

请再看一遍上面的内容。我无法减少它的 CPU 使用率（可能有另一种方法可以实现），但新的方法将保留事件处理程序并恢复选择。 - Nico Burns

Answer 4

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

spellcheck="false"

- Eric MSFT

---

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

Answer 5

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

试一下这段代码，应该可以正常运行。它基于先前的克隆内部HTML的答案。

在Firefox和Chrome中均可工作。

- Sarvesh

---

很好，这很简洁易懂。但不幸的是，它会破坏任何存在于内容中的事件处理程序。 - aaaidan