HTML and CSS Reference
explaining that “the search field is given two possible access
keys, 's' and '0' (in that order). A user agent on a device with a
full keyboard might pick Ctrl+Alt+S as the shortcut key, while a
user agent on a small device with just a numeric keypad might
pick just the plain unadorned key 0.”
Invented by Microsoft, and reverse-engineered and imple-
mented by all other browsers, contenteditable is now officially
part of HTML5.
This adoption of contenteditable means two things for brows-
ers: first, users can edit the contents of elements with this attri-
bute, so the element must be selectable and the browser must
provide a caret to mark the current editing position; second, you
can make the text bold, change the font, add lists, headings,
and so on. contenteditable is a Boolean attribute, so it can be
set to true or false. Although markup capitalisation is irrelevant,
the DOM attribute (if you were to set it programmatically through
DOM also has isContentEditable to assess whether an element
is editable—since the contentEditable flag could have been
inherited from a parent element.
Yo u c a n a l s o s e t document.designMode = 'on' (notice, not 'true' )
to enable the entire document to be editable. This can only be
be written in your HTML.
Finally, any content that is selected (highlighted) by the user can
have a number of commands run against it, such as document.
execCommand('bold') . Typical keyboard commands to make text
bold or italic (such as CTRL+B and CTRL+I respectively on Win-
dows/Linux) affect the DOM in the editable element, adding <b>
and <i> around them.
If you want to use contenteditable for some form of CMS, you
will want to save the changes to your server at some point.
There's no particular API method for doing this, but since your
user's changes have modified the DOM, you need to send the
innerHTML of the editable element (or entire document if using
designMode ) back to the server for saving in your CMS.