Tip 9In-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 information 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 ...

Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.