InlineEditBox (0.9)
In 1.0, dijit.form.InlineEditBox has been deprecated in favor of dijit.InlineEditBoxInlineEditBox is better described as a widget wrapper, which takes a child widget declared in markup and makes it inline-editable. This widget acts like a <div> tag when not in edit mode. When the contained rendered text is clicked, the widget enters an edit mode. In this mode, the previously displayed text is hidden, and another widget capable of editing text is made visible in its place.
Examples
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>InlineEdit Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/0.9.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.InlineEditBox");
dojo.require("dijit.form.TextBox");
function myHandler(idOfBox, value) {
console.debug("Edited value from "+idOfBox+" is now "+value);
}
</script>
</head>
<body class="tundra">
<span id="editable" style="font-size:larger;"
dojoType="dijit.form.InlineEditBox"
onChange="myHandler(this.id,arguments[0])">
<input dojoType="dijit.form.TextBox" value="Edit me - I trigger the onChange callback">
</span>
</body></html>
The outermost span is the InlineEditBox. The inner input tag is the TextBox widget. When a user loads the page, they see the text "Edit me - I trigger the onChange callback". If the user clicks the text, a TextBox widget containing the text "Edit me - I trigger the onChange callback" appears. When the user changes the value and clicks away, the TextBox disappears and the TextBox's contents appear inline.
InlineEditBox supports the textarea mode through the Textarea widget. By simply adding a Textarea inside the InlineEditBox HTML tag, you add inline-editing to the Textarea widget. Furthermore, by adding renderAsHtml=true, users can enter HTML into the Textarea and have it appear inline as rich text. :
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>InlineEdit Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.InlineEditBox");
dojo.require("dijit.form.Textarea");
</script>
</head>
<body class="tundra">
<span id="areaEditable" dojoType="dijit.form.InlineEditBox"
renderAsHtml="true" autoSave="false">
<textarea dojoType="dijit.form.Textarea">
I'm one big paragraph. Go ahead and <i>edit</i> me. <b>I dare you.</b>
The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ...
</textarea>
</span>
</body></html>
The outermost span in this code is the InlineEditBox. The inner textarea tag is the Textarea widget. When a user loads the page, they see the paragraph of rich text. If the user clicks the text, a Textarea widget containing the paragraph in plain text form appears. When the user changes the value and clicks away, the Textarea disappears and the Textarea's contents appear inline.
InlineEditBox can make any arbitrary widget that has a text value, or has the methods get/setDisplayedValue, inline. DateTextBox is an example of such a widget. This code shows a DateTextBox made inline in HTML:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>InlineEdit Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.InlineEditBox");
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<p id="backgroundArea" dojoType="dijit.form.InlineEditBox" >
<input name="date" value="2005-12-30"
dojoType="dijit.form.DateTextBox"
constraints={datePattern:'MM/dd/yy'}
lang="en-us"
required="true"
promptMessage="mm/dd/yy"
invalidMessage="Invalid date. Use mm/dd/yy format.">
</body></html>
The InlineEditBox can wrap around any widget that implements the following interface:
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000066; font-weight: bold;} .geshifilter .kw2 {color: #003366; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .co1 {color: #009900; font-style: italic;} .geshifilter .coMULTI {color: #009900; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #3366CC;} .geshifilter .nu0 {color: #CC0000;} .geshifilter .me1 {color: #006600;} .geshifilter .re0 {color: #0066FF;}String value = getTextValue() {... }
/* void */ focus() { ... }
The contained widget's setTextValue() method is called with the previously displayed text. When the Save button is pressed, the editing widget's getTextValue() method is called to retrieve the new text. After which, the editing widget is hidden, and the returned text is displayed. The focus method allows the editing widget to intelligently set focus to an appropriate node.
|
dijit.form.InlineEditBox
Wrapper widget for holding click-to-edit text.
|
||
|
Methods
|
||
| addChild | Process the given child widget, inserting it's dom node as a child of our dom node | |
| getChildren | returns array of children widgets | |
| hasChildren | returns true if widget has children | |
| removeChild | removes the passed widget instance from this widget but does not destroy it | |
Accessibility
General Behavior
InlineEditBoxes are wrappers around the various types of dojo TextBoxes and Textareas. When they are activated the underlying dojo widget is activated. When they are "closed" they appear as text but are tab stops in the keyboard focus ring and have an accessible role of button. They can have autoSave or non-autoSave behavior. When an non-autoSave InlineEditBox is open it has associated Save and Cancel buttons. An autoSave InlineEditBox does not have these buttons and they act like miniature forms or dialogs, i.e pressing the Esc key will close the widget and pressing the Enter key will close the widget, saving and displaying the text.Note that since InlineEditBoxes may be used on the page without a traditional label element, the developer should add a title attribute in order to provide a description that is available to screen reader users. The title will also be displayed by the browser when the user places the mouse over the element.
Keyboard
If the widget is closed.
| Action | Key |
|---|---|
| Navigate to the next widget in the tab order. | Tab |
| Navigate to the prior widget in the tab order. | Shift+Tab |
| Open the widget. | Enter or spacebar |
TextBox with autoSave specified and the TextBox is open:
| Action | Key | Comments |
|---|---|---|
| Navigate to the next widget in the tab order. | Tab | The data is saved and the widget closes. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The data is saved and the widget closes. |
| Close the TextBox, saving changes. | Enter | Keyboard focus is on the closed InlineEditBox. |
| Revert the last entry. | Esc | If the user has not entered data, the TextBox is closed. |
| Close the Textarea, discarding changes. | Esc | If the user has entered data, the Esc must be pressed two times; the first time the data will be reverted; the second time the TextBox will close. |
Textarea with autoSave specified and the Textarea is open:
| Action | Key | Comments |
|---|---|---|
| Navigate to the next widget in the tab order. | Tab (press twice in Firefox - see the Known Issues below) | The data is saved and the widget closes. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The data is saved and the widget closes. |
| Enter a newline into the text. | Enter | There is no equivalent to the Enter key behavior of TextBoxes. The user would have to use something like Tab and Shift + Tab. |
| Revert the last entry. | Esc | If the user has not entered data, the Textarea is closed. |
| Close the Textarea, discarding changes. | Esc | If the user has entered data, the Esc must be pressed two times; the first time the data will be reverted; the second time the Textarea will close. |
TextBox without autoSave specified, the TextBox is open, keyboard focus is in the edit field:
| Action | Key | Comments |
|---|---|---|
| Navigate to the Save or Cancel button. | Tab | Focus changes to the Save button if the data has been changed, otherwise it moves to the Cancel button. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The TextBox remains open. |
| Close the TextBox, saving changes. | Tab to the Save button, then press the Enter key | Keyboard focus is on the closed InlineEditBox. |
| Revert the last entry. | Esc | If the user has not entered data, the Esc key is ignored. |
| Close the Text Box, discarding changes. | Tab to the Cancel button, then press the Enter key. | Keyboard focus is on the closed InlineEditBox. |
Textarea without autoSave specified, the Textarea is open, keyboard focus is in the edit field:
| Action | Key | Comments |
|---|---|---|
| Navigate to the Save or Cancel button. | Tab (press twice in Firefox - see the Known Issues below) | Focus changes to the Save button if the data has been changed, otherwise it moves to the Cancel button. |
| Navigate to the prior widget in the tab order. | Shift+Tab | The Textarea remains open. |
| Close the Textarea, saving changes. | Tab to the Save button, then press the Enter key | Keyboard focus is on the closed InlineEditBox. |
| Revert the last entry. | Esc | If the user has not entered data, the Esc key is ignored. |
| Close the Textarea, discarding changes. | Tab to the Cancel button, then press the Enter key. | Keyboard focus is on the closed InlineEditBox. |
Known Issues
- See the Comment for the Enter key in the information for autoSaving Text Areas above.
- Ticket 3910: When Inline Text Boxes are opened, all the text should be selected.
- On Firefox 2, the user must press the Tab key twice with focus in an textarea before keyboard focus moves to the next widget. This is a permanent restriction on Firefox 2. This is because the Dojo text area is implemented using the Firefox editor component in an iframe. This editor component implements usage of the tab key within the editor to indent text and shift-tab to outdent text. There is no keyboard mechanism in Firefox to move focus out of the editor. So, the dijit editor traps the tab key in the editor and sets focus to the editor iframe. From there pressing tab again will move to the next focusable item after the editor.
Screen Reader Issues
The InlineEditBox is implemented as a button. Since these are intended to be used "in-line" within text there is often no label element associated with the underlying control. For this reason, developers are encouraged to add a title attribute to InlineEditBoxes. The Window-Eyes screen reader will speak the title as part of the button description. JAWS has an option to speak different attributes on an button. A JAWS user may need to use the insert-v command to modify the behavior to speak the button title when working with Dojo InlineEditBoxes.