spellcheck=false on contentEditable elements

Question

For normal input elements you can turn off the spell checking by using a HTML attribute (at least under FF). The same spellcheck="false" does not seem to work on a contentEditable element. Is there another solution for contentEditable elements?

As mentioned in [Adam Pascoe](https://stackoverflow.com/a/17430166/3625228)'s answer, disabling spellcheck for the entire document seems to work (2022+), even if a bit … drastic. `` — oelna, Oct 17 '22 at 13:42

score 32 · Accepted Answer · answered Feb 17 '12 at 09:10

I'm not sure if this is what you're getting at, but I was having what sounds like a similar problem with removing the spellcheck underline from contentEditable elements. The problem is, when you set the spellcheck attribute to false, any words that were underlined for spelling mistakes will keep this underline until you focus on the contentEditable element.

The following hack should do the trick:

element.spellcheck = false;
element.focus();
element.blur();

Hope that helps!

score 17 · Answer 2 · answered Apr 08 '11 at 23:10

17

In Gecko all contenteditable elements check spelling based on the spellcheck attribute/property on the <body> element.

answered Apr 08 '11 at 23:10

Neil

54,642
8
60
72

It does not seem to work for me in a clean (just Firebug) installation of FF4. At least when I set it through Firebug. – medihack Apr 08 '11 at 23:16
`data:text/html,
Fe Fi Fo Fum` shows to me as misspelled. `data:text/html,
Fe Fi Fo Fum` does not.
– Neil Apr 09 '11 at 16:09

score 16 · Answer 3 · edited May 28 '15 at 07:36

16

Based on what Neil said, I came up with this guy:

$('body').attr("spellcheck",false)

It defaulted all of my contenteditable divs to not use spell check. I plan on using .blur and .focus to enable spell check for individual divs as necessary.

edited May 28 '15 at 07:36

j0k

22,600
28
79
90

answered Jul 02 '13 at 15:54

Adam Pascoe

171
1
4

22

No need for jQuery for something so simple: `document.body.setAttribute('spellcheck', false);` – Stephen Jenkins Jan 08 '14 at 16:41
Indeed, you don't need jQuery for every project you make – RixTheTyrunt Jan 03 '23 at 11:20

score 0 · Answer 4 · answered Apr 08 '11 at 23:14

Even disregarding browser bugs you can't turn off the spell checking, all you can do is suggest to the user agent that it doesn't spell check stuff. If you look at the section of the spec where it describes the algorithm for determining what's spell checkable here's the first two steps:

If the user has disabled the checking for this text, then the checking is disabled.
Otherwise, if the user has forced the checking for this text to always be enabled, then the checking is enabled.

User preferences always override the attributes.

spellcheck=false on contentEditable elements

4 Answers4

Linked