HTML and CSS Reference
In-Depth Information
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.”
contenteditable
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
JavaScript) requires
contentEditable
(note the capital E). The
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
done using JavaScript—there is no equivalent attribute that can
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.
