User agents can support the checking of spelling and grammar of editable text, either in form controls (such as the value of textarea elements), or in elements in an editing host (e.g. using contenteditable). – HTML Standard

Definition of editable text

The rough definition of editable text may be considered as value/text of the following elements:

  • input[type=text], input[type=search], input[type=url], input[type=email] elements without readonly or disabled attribute;
  • textarea elements without readonly or disabled attribute;
  • [contenteditable] elements;
  • designMode enabled document.

For the exact definition, please check HTML Standard.

Three states of spellcheck

The spellcheck has three states:

  1. true: the element is to have its spelling and grammar checked;
  2. false: the element is not to be checked;
  3. default: the element is to act according to a default behavior.

Three default behaviors of spellcheck

Each element has a default behavior, either through browser defaults or through user preferences.

  1. true-by-default: The element will be checked for spelling and grammar if its contents are editable and spellchecking is not explicitly disabled through the spellcheck attribute.
  2. false-by-default: The element will never be checked for spelling and grammar unless spellchecking is explicitly enabled through the spellcheck attribute.
  3. inherit-by-default: The element's default behavior is the same as its parent element's. Elements that have no parent element cannot have this as their default behavior.

Table of default states

Here is the table of default states of spellcheck across various browsers and different elements.

Browser <html> <textarea> <input> Others Comment
Firefox false inherit [*] inherit inherit [*] If no parent elements of <textarea> has spellcheck explicitly set, <textarea> will have spellcheck computed as true, otherwise, it inherits.
Chrome true inherit inherit inherit  
IE true inherit inherit inherit  
Edge true inherit inherit inherit  
Safari true inherit inherit inherit  

Speicfying spellcheck attribute

To have spelling- and grammar-checking enabled, we can specify the spellcheck attribute on relevant elements via HTML or JavaScript.

The spellcheck attribute in HTML

The spellcheck attribute in HTML is an enumerated one, with the following keyword-state mapping (case-insensitive):

Keyword State Examples
(empty string) true <textarea spellcheck=""></textarea>
<textarea spellcheck></textarea>
true true <textarea spellcheck="true"></textarea>
false false <textarea spellcheck="false"></textarea>
(any other string) default <textarea spellcheck="foo"></textarea>
<textarea spellcheck="inherit"></textarea>
<textarea spellcheck="default"></textarea>

The spellcheck attribute in JavaScript

The spellcheck attribute in JavaScript is an boolean one. It returns computed state (either true or false) on getting, and can be setted to true or false.

// get example
console.log(document.documentElement.spellcheck);

// set example
document.documentElement.spellcheck = true;