跨度后 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) 和 span 中的文本 (imaspan!) 显示为拼写错误，但 span 后面的单词 (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 也会对初始内容进行拼写检查（但与其他浏览器一样，它仅支持少数几种语言。