contenteditable div中的HTML拼写检查在跨度后无法工作 [英] HTML spellcheck in contenteditable div not working after span

问题描述

在我的contenteditable div中，我将 spellcheck 属性设置为 true 。 红色曲线在任何存在的时间间隔（或之前）都可以工作，但不能在之后工作。在以下HTML中：

In my contenteditable div, I have the spellcheck attribute set to true. The "red squiggles" work before (and in) any span that's present, but not after. In the following HTML:

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

第一个单词（ misssspellelellled ）和span（ imaspan！）中的文本显示为拼写错误，但跨度后面的文本（ alsomisspelleelled ）不会。见下面的截图：

The first word (misssspellelellled) and the text in the span (imaspan!) show up as misspelled, but the word after the span (alsomisspelleelled) does not. See the following screenshot:

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

Any ideas as to how to fix this? This bug may be specific to Chrome.

可以在这里找到一个实例： http://codepen.io/kauffecup/pen/AnBIK （您可能需要关注并模糊div才能显示任何红色小方块）。

A live example can be found here: http://codepen.io/kauffecup/pen/AnBIK (you may need to focus and blur the div to get any "red squiggles" to show).

推荐答案

这是Chrome（和IE）中 spellcheck 的一个实现特性：浏览器检查用户输入，而不是初始（预填充）内容或以编程方式插入的内容。如果你编辑预先填好的内容，也许只是附加一段时间，浏览器可能会对其进行拼写检查。确切的条件似乎有所不同。有时只需通过双击选择一个单词就会导致拼写检查。有时，一个单词由一些标点符号结束是非常重要的。嵌套的元素也可能会受到影响。

This is a feature of the implementation of spellcheck in Chrome (and IE): the browser checks user input, not initial (prefilled) content or programmatically inserted content. If you e.g. edit prefilled content, perhaps just by appending a period, the browser may run spell checking on it. The exact conditions for this seem to vary. Sometimes just selecting a word by double-clicking causes spelling check. Sometimes it is essential that a word is ended by some punctuation mark. Nesting of elements may affect too.

这种行为在WHATWG HTML（HTML Living Standard）中隐含引用，子句拼写和语法检查：它描述了 forceSpellCheck （）（现在还没有实现），它强制用户代理报告元素上的拼写和语法错误（如果启用了检查），即使用户从未关注元素。 （如果该方法未被调用，用户代理可以隐藏文本中的错误，而不仅仅是用户输入的错误。）

Such behavior is implicitly referred to in WHATWG HTML ("HTML Living Standard"), clause Spelling and grammar checking: it describes the forceSpellCheck() (no implementations yet, it seems), which "forces the user agent to report spelling and grammar errors on the element (if checking is enabled), even if the user has never focused the element. (If the method is not invoked, user agents can hide errors in text that wasn't just entered by the user.)"

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

Anyway, the conclusion is that you should not expect initial content to be spellchecked. It should be checked, with some suitable tools, before generating the page.

spellcheck 属性已经被隐含地定义，并且在很多方面依赖于浏览器。它依赖于浏览器。 Firefox也会对初始内容进行拼写检查（但与其他浏览器一样，它只支持少数几种语言。）

The spellcheck attribute has been defined vaguely and in many ways browser-dependent. And browser-dependent it is. Firefox runs spelling checks on initial content too (but it, like other browsers, supports only a handful of languages.

这篇关于contenteditable div中的HTML拼写检查在跨度后无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！