How does the html5 spellcheck attribute work?

Question

How does the html5 spellcheck attribute work?

I am seeing this page with Chrome 17, which is supposed to support spellcheck on <textarea>, (but not on <input type='text'>), but when I type in some non-words in the textarea given in that page, I see no change.

Answer 1

The spellcheck attribute is still poorly (if at all) implemented in browsers. For example, when I visit the page you mention in Chrome 18 and type misspelled words into the box “This text area should be checked for mispelled words.” the browser marks “words” as misspelled. Double clicking on some other word makes it indicated as misspelled, too. The explanation is that I had Spanish set as the spellchecking language. Note: This language can be changed by right-clicking on the input are and selecting the spellcheck settings, but the change does not take effect before the page is reloaded.

So check out those settings in your browser. Note that there’s a checkbox there that controls whether spellchecking is in use at all.

Answer 2

See this working example applied to a text area. That is working in safari, chrome and firefox for me. If not, please provide information about what OS you use. Browser support is currently limited, as you can see below.

Answer 3

Support has improved over time. This is an updated table:

Few things to consider:

• Default value depends on the element and browser. Generally, contenteditable and <textarea> behave as if it were set to “true”, and <input> behave as if it were set to false.
• Spellcheck does not impact validation.
• Android provides autosuggest, but doesn’t support spellcheck.

More info: MDN article, Wuffo article, Latest comparison table