在contenteditable div中的HTML拼写检查在span之后不起作用

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 Living Standard”），第Spelling and grammar checking条中隐含地提到了这种行为：它描述了forceSpellCheck()（似乎没有实现），它“强制用户代理”报告元素上的拼写和语法错误（如果启用了检查），即使用户从未关注过该元素。 （如果未调用该方法，则用户代理可以隐藏不仅仅是用户输入的文本中的错误。）“

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

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