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!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

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!

  4. Josh

    It seems like it doesn’t respect lang attribute, for instance:

    <div lang="en" spellcheck="true" contenteditable="true">One, two, three...</div>
    <div lang="de" spellcheck="true" contenteditable="true">Ein, zwei, drei...</div>
    

    Any comment on that?

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