HTML and CSS Reference
In-Depth Information
Any text the user types is added to
the document. This requires no
scripting on your part—the
browser does all the work.
To make multiple elements editable, you can apply the
contenteditable
attribute to the parent, and the child elements will inherit the setting:
<section contenteditable="true">
<h1>Stef</h1>
<p>Stef works...
...than he does.</p>
<img
src="headshots/stef.gif"
alt="Stef">
</section>
In the previous example, both the
<h1>
and the
<p>
elements are edit-
able. So is the
<img>
element, but your only option is deletion—you
can't edit the image from within the browser with the
contenteditable
API
. It may be possible to build your own image editor using the
<canvas>
element (see chapter 3), but we don't have room to get into
that here.
You can override the
contenteditable
value on a parent element by
explicitly setting
contenteditable
on a child element:
