<!DOCTYPE html><html lang="en-US-x-Hixie"><meta charset="utf-8"><title>7.6.4 Editing APIs — HTML5</title><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { white-space: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: hidden; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
td.eg { border-width: thin; text-align: center; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
.details-example img { vertical-align: top; }
#base64-table {
white-space: nowrap;
font-size: 0.6em;
column-width: 6em;
column-count: 5;
column-gap: 1em;
-moz-column-width: 6em;
-moz-column-count: 5;
-moz-column-gap: 1em;
-webkit-column-width: 6em;
-webkit-column-count: 5;
-webkit-column-gap: 1em;
}
#base64-table thead { display: none; }
#base64-table * { border: none; }
#base64-table tbody td:first-child:after { content: ':'; }
#base64-table tbody td:last-child { text-align: right; }
#named-character-references-table {
white-space: nowrap;
font-size: 0.6em;
column-width: 30em;
column-gap: 1em;
-moz-column-width: 30em;
-moz-column-gap: 1em;
-webkit-column-width: 30em;
-webkit-column-gap: 1em;
}
#named-character-references-table > table > tbody > tr > td:first-child + td,
#named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
#named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
#named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
.glyph.control { color: red; }
@font-face {
font-family: 'Essays1743';
src: url('fonts/Essays1743.ttf');
}
@font-face {
font-family: 'Essays1743';
font-weight: bold;
src: url('fonts/Essays1743-Bold.ttf');
}
@font-face {
font-family: 'Essays1743';
font-style: italic;
src: url('fonts/Essays1743-Italic.ttf');
}
@font-face {
font-family: 'Essays1743';
font-style: italic;
font-weight: bold;
src: url('fonts/Essays1743-BoldItalic.ttf');
}
</style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
i, em { font-style: italic; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead, table tbody { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra, p.overview { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
figure.diagrams { border: double black; background: white; padding: 1em; }
figure.diagrams img { display: block; margin: 1em auto; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
.note em, .warning em, .note i, .warning i { font-style: normal; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
.bookkeeping dt { margin: 0.5em 2em 0; }
.bookkeeping dd { margin: 0 3em 0.5em; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
body.dfnEnabled dfn { cursor: pointer; }
.dfnPanel {
display: inline;
position: absolute;
z-index: 10;
height: auto;
width: auto;
padding: 0.5em 0.75em;
font: small sans-serif, Droid Sans Fallback;
background: #DDDDDD;
color: black;
border: outset 0.2em;
}
.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
.dfnPanel :link, .dfnPanel :visited { color: black; }
.dfnPanel p { font-weight: bolder; }
.dfnPanel * + p { margin-top: 0.25em; }
.dfnPanel li { list-style-position: inside; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
fieldset { margin: 1em; padding: 0.5em 1em; }
fieldset > legend + * { margin-top: 0; }
fieldset > :last-child { margin-bottom: 0; }
fieldset p { margin: 0.5em 0; }
</style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
</script><link href="editing.html" rel="prev" title="7 User interaction">
<link href="index.html#contents" rel="contents" title="Table of contents">
<link href="dnd.html" rel="next" title="7.7 Drag and drop">
<body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
<h2 class="no-num no-toc" id="editor's-draft-date-1-january-1970">Editor's Draft 21 November 2012</h2>
</div>
<nav class="prev_next">
<a href="editing.html">← 7 User interaction</a> –
<a href="index.html#contents">Table of contents</a> –
<a href="dnd.html">7.7 Drag and drop →</a>
<ol class="toc"><li><ol><li><ol><li><a href="editing-apis.html#editing-apis"><span class="secno">7.6.4 </span>Editing APIs</a><li><a href="editing-apis.html#spelling-and-grammar-checking"><span class="secno">7.6.5 </span>Spelling and grammar checking</a></ol></ol></ol></nav>
<h4 id="editing-apis"><span class="secno">7.6.4 </span>Editing APIs</h4>
<p>The definition of the terms <dfn id="active-range">active range</dfn>, <dfn id="editing-host">editing
host</dfn>, and <dfn id="editable">editable</dfn>, the user interface requirements
of elements that are <a href="#editing-host" title="editing host">editing hosts</a>
or <a href="#editable">editable</a>, the
<dfn id="execCommand" title="dom-document-execCommand"><code>execCommand()</code></dfn>,
<dfn id="dom-document-querycommandenabled" title="dom-document-queryCommandEnabled"><code>queryCommandEnabled()</code></dfn>,
<dfn id="dom-document-querycommandindeterm" title="dom-document-queryCommandIndeterm"><code>queryCommandIndeterm()</code></dfn>,
<dfn id="dom-document-querycommandstate" title="dom-document-queryCommandState"><code>queryCommandState()</code></dfn>,
<dfn id="dom-document-querycommandsupported" title="dom-document-queryCommandSupported"><code>queryCommandSupported()</code></dfn>, and
<dfn id="dom-document-querycommandvalue" title="dom-document-queryCommandValue"><code>queryCommandValue()</code></dfn>
methods, text selections, and the <dfn id="delete-the-selection">delete the selection</dfn>
algorithm are defined in the HTML Editing APIs specification. The
interaction of editing and the undo/redo features in user agents is
defined by the UndoManager and DOM Transaction specification. <a href="references.html#refsEDITING">[EDITING]</a> <a href="references.html#refsUNDO">[UNDO]</a></p>
<!-- those might get merged in here eventually -->
<h4 id="spelling-and-grammar-checking"><span class="secno">7.6.5 </span>Spelling and grammar checking</h4>
<div class="impl">
<p>User agents can support the checking of spelling and grammar of
editable text, either in form controls (such as the value of
<code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements), or in elements in an <a href="#editing-host">editing
host</a> (e.g. using <code title="attr-contenteditable"><a href="editing.html#attr-contenteditable">contenteditable</a></code>).</p>
<p>For each element, user agents must establish a <dfn id="concept-spellcheck-default" title="concept-spellcheck-default">default behavior</dfn>, either
through defaults or through preferences expressed by the user. There
are three possible default behaviors for each element:</p>
<dl><dt><dfn id="concept-spellcheck-default-true" title="concept-spellcheck-default-true">true-by-default</dfn>
<dd>The element will be checked for spelling and grammar if its
contents are editable.
<dt><dfn id="concept-spellcheck-default-false" title="concept-spellcheck-default-false">false-by-default</dfn>
<dd>The element will never be checked for spelling and grammar.
<dt><dfn id="concept-spellcheck-default-inherit" title="concept-spellcheck-default-inherit">inherit-by-default</dfn>
<dd>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.
</dl><hr></div>
<p>The <dfn id="attr-spellcheck" title="attr-spellcheck"><code>spellcheck</code></dfn>
attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> whose keywords are
the empty string, <code title="">true</code> and <code title="">false</code>. The empty string and the <code title="">true</code> keyword map to the <i>true</i> state. The <code title="">false</code> keyword maps to the <i>false</i> state. In
addition, there is a third state, the <i>default</i> state, which is
the <i>missing value default</i> (and the <i>invalid value
default</i>).</p>
<p class="note">The <i>true</i> state indicates that the element is
to have its spelling and grammar checked. The <i>default</i> state
indicates that the element is to act according to a default
behavior, possibly based on the parent element's own <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> state, as defined below.
The <i>false</i> state indicates that the element is not to be
checked.</p>
<div class="impl">
<hr></div>
<dl class="domintro"><dt><var title="">element</var> . <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns true if the element is to have its spelling and grammar
checked; otherwise, returns false.</p>
<p>Can be set, to override the default and set the <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute.</p>
</dd>
</dl><div class="impl">
<p>The <dfn id="dom-spellcheck" title="dom-spellcheck"><code>spellcheck</code></dfn> IDL
attribute, on getting, must return true if the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute is in
the <i>true</i> state, or if the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute is in
the <i>default</i> state and the element's <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is <a href="#concept-spellcheck-default-true" title="concept-spellcheck-default-true">true-by-default</a>, or
if the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code>
content attribute is in the <i>default</i> state and the element's
<a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is
<a href="#concept-spellcheck-default-inherit" title="concept-spellcheck-default-inherit">inherit-by-default</a>
and the element's parent element's <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code> IDL attribute would return
true; otherwise, if none of those conditions applies, then the
attribute must instead return false.</p>
<p class="note">The <code title="dom-spellcheck"><a href="#dom-spellcheck">spellcheck</a></code>
IDL attribute is not affected by user preferences that override the
<code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute,
and therefore might not reflect the actual spellchecking state.</p>
<p>On setting, if the new value is true, then the element's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute must be
set to the literal string "<code title="">true</code>", otherwise it
must be set to the literal string "<code title="">false</code>".
<hr><p>User agents must only consider the following pieces of text as
checkable for the purposes of this feature:</p>
<ul><li>The value of <code><a href="the-input-element.html#the-input-element">input</a></code> elements to which the <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute applies,
whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attributes are not
in the <a href="states-of-the-type-attribute.html#password-state-(type=password)" title="attr-input-type-password">Password</a>
state, and that are not <i title="concept-input-immutable"><a href="the-input-element.html#concept-input-immutable">immutable</a></i> (i.e. that do not
have the <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>
attribute specified and that are not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>).</li>
<li>The value of <code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements that do not have a
<code title="attr-textarea-readonly"><a href="the-textarea-element.html#attr-textarea-readonly">readonly</a></code> attribute and
that are not <a href="attributes-common-to-form-controls.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>.</li>
<li>Text in <code><a href="infrastructure.html#text-0">Text</a></code> nodes that are
children of <a href="#editing-host" title="editing host">editing hosts</a> or
<a href="#editable">editable</a> elements.</li>
<li>Text in attributes of <a href="#editable">editable</a> elements.</li>
</ul><p>For text that is part of a <code><a href="infrastructure.html#text-0">Text</a></code> node, the element
with which the text is associated is the element that is the
immediate parent of the first character of the word, sentence, or
other piece of text. For text in attributes, it is the attribute's
element. For the values of <code><a href="the-input-element.html#the-input-element">input</a></code> and
<code><a href="the-textarea-element.html#the-textarea-element">textarea</a></code> elements, it is the element itself.</p>
<p>To determine if a word, sentence, or other piece of text in an
applicable element (as defined above) is to have spelling- and/or
grammar-checking enabled, the UA must use the following
algorithm:</p>
<ol><!-- user override --><li>If the user has disabled the checking for this text, then the
checking is disabled.</li>
<li>Otherwise, if the user has forced the checking for this text to
always be enabled, then the checking is enabled.</li>
<!-- content attribute: on, off -->
<li>Otherwise, if the element with which the text is associated has
a <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content
attribute, then: if that attribute is in the <i>true</i> state,
then checking is enabled; otherwise, if that attribute is in the
<i>false</i> state, then checking is disabled.</li>
<!-- inherit, if there is one to inherit from -->
<li>Otherwise, if there is an ancestor element with a <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content attribute that is
not in the <i>default</i> state, then: if the nearest such
ancestor's <code title="attr-spellcheck"><a href="#attr-spellcheck">spellcheck</a></code> content
attribute is in the <i>true</i> state, then checking is enabled;
otherwise, checking is disabled.</li>
<!-- default -->
<li>Otherwise, if the element's <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is <a href="#concept-spellcheck-default-true" title="concept-spellcheck-default-true">true-by-default</a>,
then checking is enabled.</li>
<li>Otherwise, if the element's <a href="#concept-spellcheck-default" title="concept-spellcheck-default">default behavior</a> is <a href="#concept-spellcheck-default-false" title="concept-spellcheck-default-false">false-by-default</a>,
then checking is disabled.</li>
<!-- default inheritance -->
<li>Otherwise, if the element's parent element has <em>its</em>
checking enabled, then checking is enabled.</li>
<li>Otherwise, checking is disabled.</li>
</ol><p>If the checking is enabled for a word/sentence/text, the user
agent should indicate spelling and/or grammar errors in that
text. User agents should take into account the other semantics given
in the document when suggesting spelling and grammar
corrections. User agents may use the language of the element to
determine what spelling and grammar rules to use, or may use the
user's preferred language settings. UAs should use
<code><a href="the-input-element.html#the-input-element">input</a></code> element attributes such as <code title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code> to ensure that the
resulting value is valid, where possible.</p>
<p>If checking is disabled, the user agent should not indicate
spelling or grammar errors for that text.</p>
<div class="example">
<p>The element with ID "a" in the following example would be the
one used to determine if the word "Hello" is checked for spelling
errors. In this example, it would not be.</p>
<pre><div contenteditable="true">
<span spellcheck="false" id="a">Hell</span><em>o!</em>
</div></pre>
<p>The element with ID "b" in the following example would have
checking enabled (the leading space character in the attribute's
value on the <code><a href="the-input-element.html#the-input-element">input</a></code> element causes the attribute to be
ignored, so the ancestor's value is used instead, regardless of the
default).</p>
<pre><p spellcheck="true">
<label>Name: <input spellcheck=" false" id="b"></label>
</p></pre>
</div>
</div>
<p class="note">This specification does not define the user
interface for spelling and grammar checkers. A user agent could
offer on-demand checking, could perform continuous checking while
the checking is enabled, or could use other interfaces.</p>
Webmaster
![[BACK]](/https/dev.w3.org/cvsweb/icons/back.gif){kind=icon}
Return to editing-apis.html CVS log ![[TXT]](/https/dev.w3.org/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/https/dev.w3.org/cvsweb/icons/dir.gif){kind=icon}
Up to [Public] / html5 / spec