spellcheck attribute example does not work

[AJamesPhillips]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck

What specific section or headline is this issue about?

Try it

What information was incorrect, unhelpful, or incomplete?

The example does not work. No spell checking error is shown:

What did you expect to see?

The misspelt words should be underlined in red.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Using Firefox 103.0.1 on Mac 12.2.1

MDN metadata

Page report details

• Folder: en-us/web/html/global_attributes/spellcheck
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/global_attributes/spellcheck/index.md
• Last commit: https://github.com/mdn/content/commit/d8b91c1b8d11694135ffa9722bd8fb1fb0eb06ea
• Document last modified: 2022-05-25T00:50:39.000Z

[rubiesonthesky]

Can confirm. Does not work on Firefox & Mac. Chrome & Mac works.

It works on Firefox if instead of p textarea is used.

<textarea contenteditable spellcheck="true">
This exampull will be checkd fur spellung when you try to edit it.
</textarea>

<textarea contenteditable spellcheck="false">
This exampull will nut be checkd fur spellung when you try to edit it.
</textarea>

[teoli2003]

Note that the article explicitly says that browsers are "free" to choose to allow it on some elements or not.

It would be nice to have:

1. Examples that work everywhere (with <textarea>?)
2. In the article, a list of elements it works on.

[MasterInQuestion]

    What about linking this issue in the original page? (poor fix; but better than nothing at all)

[teoli2003]

Not sure, what is the original page?

[MasterInQuestion]

    I mean adding the link of this issue [ https://github.com/mdn/content/issues/19285 ] in [ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck ] (the original page).

    Also, please review this [ https://github.com/mdn/content/pull/19494 ].

[hanzl035]

https://github.com/mdn/content/issues/19285#issuecomment-1208151418 the spellcheck and contenteditable attributes work on 'p' elements in Firefox and Chrome on my computers (just not in the way the example author intended). The example appears to be broken because most browsers won't check the spelling of content unless that content is provided by the user.

This specification does not define the user interface for spelling and grammar checkers. A user agent could offer on-demand checking, could perform continuous checking while the checking is enabled, or could use other interfaces.

If a word is edited by the user and misspelled in the example; a red underline will appear in both Chrome and Firefox. In Chrome, it appears the entire element is checked for spelling if any content is edited by a user. In Firefox, it appears only the words that were edited are checked for spelling (unless the element is a textarea).

It may be possible that the content will load with red underlines upon refresh (because the attribute trigger is supposed to be sticky I think). However, I haven't been able to get red underlines without a user edit (even if the element is a textarea).

The existing example could be rephrased, prompting a user to input incorrectly spelled words into a contenteditable p element. There should probably be a note that most browsers have opted to check spelling on-demand. Spellchecking for textarea elements is turned on by default; another good example would be using this attribute to turn off spellchecking in a textarea element.

[AJamesPhillips]

Thanks @hanzl035 . I tried deleting all the text and replacing with mispelt words but it still did not highlight any spelling mistakes:

Changing to a textarea also did not help:

[Nickel-sudo]

Has anyone figured out how to fix it meanwhile or is there a solution for it? I face the same issues regarding spellCheck in Firefox as described above. Spell Check is not triggered at all when using either <textarea> or <p>.

[Nickel-sudo]

I don't know if it matters, but I am using React for my current project. I have not found any informations up so far that this is an React issue.

[MasterInQuestion]

    "spellcheck" may be outright unsupported by the browser:     For there lacks an universal way to implement spell checking consistently, without introducing remote dependence.