HTML5 and CSS3, Second Edition

Tip 9

In-Place Editing with contenteditable

We’re always looking for ways to make it easier for people to interact with our

applications. For example, sometimes we want our site’s users to edit infor-

mation about themselves without having to navigate to a different form. We

traditionally implement in-place editing by watching text regions for clicks

and replacing those regions with text fields. These fields send the changed

text back to the server via Ajax. HTML5’s contenteditable attribute takes care of

the data-entry part automatically. We’ll still have to write some JavaScript to

send the data back to the server so we can save it, but we no longer have to

create and toggle hidden forms.

One of AwesomeCo’s current projects lets users review their account profiles.

It displays their name, city, state, postal code, and email address. Let’s add

some in-place editing to this profile page so that we end up with an interface

like in the figure here.

Figure 7—In-place editing made easy

Before we get started, I want you to know that implementing a feature that

relies on JavaScript without first implementing a server-side solution goes

against everything I believe in when it comes to building accessible web

applications. We’re doing it this way here because I want to focus on the fea-

tures of the contenteditable attribute, and this is not production code. Always,

and I mean always, build the solution that does not require JavaScript first,

then build the version that relies on scripting, and finally be sure to write

automated tests for both paths so that you’re more likely to catch bugs if you

report erratum • discuss

In-Place Editing with contenteditable • 59

Download from Wow! eBook <www.wowebook.com>