Issue #15 - spell check

I did it again; I was on vacation. That’s the reason you didn’t receive any HTMHell newsletters in the past 2 weeks. Anyway, I’m back and you can expect weekly newsletters from now on.

Have a great weekend,
Manuel

View this issue in the browser.

HTMHell Newsletter Issue #15 - Spell check

You can disable spell check in input, textarea and contenteditable fields.

<label for="msg">Message</label>
<textarea spellcheck="false" id="msg">HTML is amazzing!</textarea>

spellcheck is an enumerated attribute, so we must provide a value, either “true” or “false”. If no attribute is present, the browser decides whether it checks an element for spelling errors.

<div>
  <label for="msg">Message</label>
  <input value="HTML is amazzing!" id="msg">
</div>

<div>
  <label for="msg2">Message</label>
  <textarea id="msg2">HTML is amazzing!</textarea>
</div>

<div>
  <strong>Message:</strong>
  <div contenteditable>HTML is amazzing!</div>
</div>

If you click one of the fields below (in some browsers you have to type something), you should see a squiggly, dashed or dotted red line indicating that “amazzing” isn’t spelled correctly. Please note: Results may differ depending on your browser and default language. The attribute is merely a hint, browsers are not required to check for spelling errors.

Note: If you’re viewing this in an e-mail client, the demo probably doesn’t work. It’s best to try it in your browser.

We can hint browsers at (not) checking an element for spelling errors.

<div>
  <label for="msg2">Message</label>
  <textarea spellcheck="false" id="msg2">HTML is amazzing!</textarea>
</div>

In the following textarea you shouldn't see a squiggly red line because spellcheck is set to “false”.

In the following input field you should see a squiggly red line because spellcheck is set to true.

Resources

• caniuse
• HTML spec

Read this issue in your browser or share it with others: htmhell.dev/tips/spell-check