288 Chapter 12—Finishing Touches:Some Global Attributes
12.6 The Attributes “contenteditable” and “spellcheck”
HTML pages can be made editable via the contenteditable attribute, but of
course the changes occur only in memory. For filling in an online form be-
fore printing it, this can be very useful, and there are surely fields of applica-
tion within the intranet as well, especially if amended content is written back
with scripts. We do not want to go quite that far in this section; instead, we will
merely demonstrate how contenteditable can be activated. The syntax in the
HTML code is simple:
<p contenteditable=true>
Text to be edited ...
</p>
The editable area is highlighted by clicking on the paragraph, and a flashing cur-
sor appears in the text. You can then use hotkeys or the context menu to cut,
paste, copy, or delete content, just as in a text editor, and all actions can also be
undone step by step. If we want to also activate the spell check, we need to add
the attribute spellcheck and set it to true:
<p contenteditable=true spellcheck=true>
Text to be edited ...
</p>
The specification does not define how the spell check should be carried out in
detail; this is up to the individual browser. Using the example of Firefox 3.6, Fig-
ure 12.5 shows what such an implementation could look like. The example is of
course also available for testing online at http://html5.komplett.cc/code/chap_
global/edit_page_en.html.