跨度后 contenteditable div 中的 HTML 拼写检查不起作用

Question

在我的 contenteditable div 中，我将 spellcheck 属性设置为 true。 “红色波浪线”在存在的任何跨度之前(和之中)起作用，但在之后不起作用。在以下 HTML 中:

<div contenteditable="true" id="input" class="input" spellcheck="true">
  misssspellelellled
  <span class="test-span">
    imaspan!
  </span>
  alsomisspelleelled
</div>

第一个单词 (misssspellelellled) 和跨度中的文本 (imaspan!) 显示为拼写错误，但跨度之后的单词 (alsomisspelleelled) 没有。请参见以下屏幕截图:

关于如何解决这个问题有什么想法吗？此错误可能特定于 Chrome。

可以在这里找到一个实例:http://codepen.io/kauffecup/pen/AnBIK (您可能需要聚焦并模糊 div 才能显示任何“红色波浪线”)。

Answer 1

这是 Chrome(和 IE)中 spellcheck 实现的一项功能:浏览器检查用户输入，而不是初始(预填充)内容或以编程方式插入的内容。如果你例如编辑预填充的内容，也许只是通过附加句点，浏览器可能会对其进行拼写检查。确切的条件似乎有所不同。有时只需通过双击选择一个词即可进行拼写检查。有时一个词必须以标点符号结尾。元素的嵌套也可能会产生影响。

此类行为在 WHATWG HTML(“HTML 生活标准”)条款 Spelling and grammar checking 中隐含提及: 它描述了 forceSpellCheck()(似乎还没有实现)，它“强制用户代理报告元素的拼写和语法错误(如果启用检查)，即使用户有从不关注元素。 (如果该方法未被调用，用户代理可以在并非由用户输入的文本中隐藏错误。)”

无论如何，结论是您不应该期望对初始内容进行拼写检查。在生成页面之前，应该使用一些合适的工具对其进行检查。

spellcheck attribute已经被模糊地定义并且在许多方面依赖于浏览器。它依赖于浏览器。 Firefox 也会对初始内容进行拼写检查(但与其他浏览器一样，它仅支持少数几种语言。