Treehouse

spellcheck Attribute

By on  

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!

ydkjs-4.png

Recent Features

  • Facebook Open Graph META&nbsp;Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and...

  • Create a CSS Flipping&nbsp;Animation

    You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the...

  • Create a CSS&nbsp;Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube...

Incredible Demos

Discussion

  1. Peter Kasting

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

    • Thank your for letting me know Peter — apparently I was misled!

  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!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor