HTML spellcheck in contenteditable div not working after span

Question

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>

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:

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

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).

Answer 1

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.

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.

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.