spellcheck Attribute

Written by David Walsh on December 5, 2012 · 4 Comments

Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?  Let's take a look at how it's used!

The HTML

The spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element):

<!-- spellcheck everything! -->
<input type="text" spellcheck="true" /><br />
<textarea spellcheck="true"></textarea>
<div contenteditable="true" spellcheck="true">I am some content</div>

<!-- spellcheck nothing! -->
<input type="text" spellcheck="false" /><br />
<textarea spellcheck="false"></textarea>
<div contenteditable="true" spellcheck="false">I am some content</div>

You can use spellcheck on INPUT, TEXTAREA, and contenteditable elements.  The spellcheck attribute works well paired with the autocomplete, autocapitalize, and autocorrect attributes too!

We've all filled out form fields on our mobile and desktop devices which check spelling or grammer and probably shouldn't.  The spellcheck attribute can save us from that embarrassment when used properly!

Comments

  1. Peter Kasting December 6, 2012

    Wait a minute, how is this new? I helped spec the spellcheck attribute, and implement it in Firefox, in 2006.

  2. Guess it’s one of the lesser known features in HTML, even if it’s been around for a while.

  3. First time that I’ve heard about it, thus: appreciated!

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Telephone Link Protocol
Newer
Disable Autocomplete, Autocapitalize, and Autocorrect