Dojo: The Definitive Guide

InlineEditBox

The InlineEditBox is often described as a wrapper widget in that it provides a marked-up static display for what is really an editable control—then, when you're ready to edit it, you do so inline by simply selecting it. For example, instead of having a fixed size, editable TextBox always visible on the screen, you could wrap it in an InlineEdit box and it would appear as ordinary markup on the screen (like a label), but when you select it, it transforms back into a TextBox for editing. When editing completes as signaled by an event, such as the Enter key being pressed, it switches back to markup.

In its simplest usage, you might simply wrap a TextBox in an InlineEditable as part of a form letter application, like the following example. Note that what would have normally appeared as a TextBox and cluttered up the display is presented just like ordinary markup, while clicking on it transforms it into an editable control:

Dear <span dojoType="dijit.InlineEditBox" autoSave="false"
  editor="dijit.form.TextBox">Valued Customer</span>:

<div>We have received your request to be removed from our spam list. Not to
worry, we'll remove you when we're good and ready. In the meanwhile, please do
not hesitate to contact us with further complaints.</div>

<div>Sincerely,</div>
<span dojoType="dijit.InlineEditBox" autosave="false"
  editor="dijit.form.TextBox">Customer Service</span>

To recap, the autosave attribute being set to false results in the control presenting Save and Cancel buttons ...