-
Slide 1 -
Slide 2 -
Slide 3 -
Slide 4 -
Slide 5 -
Slide 6
Edit in place (also called in-place editing) follows the axiom Alan Cooper calls "allow input wherever you have output". The combobox – a form element unfortunately absent from HTML – demonstrates this. In the same place where the current selection is displayed, the user can enter a value directly.
Editable #1: Double-click anywhere in this paragraph to edit its content. Press TAB or click outside the edit area to finish. Press ESCAPE to cancel.
Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.
We can do paragraphs, styling, links, or any HTML, really.
| DADA | NHUG | TTAY | |
|---|---|---|---|
| DADA | 1 | 3 | |
| NHUG | 1 | 2 | |
| TTAY | 3 | 2 |
Without applying some kind of limitation, any markup whatsoever can be entered. In practice you would normally want to limit the type of markup allowed perhaps via a wysiwyg editor or a text formatter like Markdown.
Combining in place editing with Drag & Drop Sortable Lists results in nice direct manipulation for managing a list of labels.
| List 1 | List 2 | List 3 |
|---|---|---|
|
|
|
| Sort only | Sort and edit (double click) | Sort and edit (single click) |
| List 4 | List 5 | |
|
|
|
| Drag handles | Always editable |
|
Safari 1.2: Extra whitespace is introduced by the "Edit Markup" example (resolved in 1.3).
Positioning text inputs over labels doesn't work as well in Safari 1.2 as in Firefox. Sizing inputs via CSS doesn't work in Safari 1.2 (resolved in 1.3)
Safari 1.2 has issues making the dragged item transparent. Following siblings become transparent as well. (resolved in 1.3)
Firefox 1.0: you can be editing a label and start a drag without the label reverting back to display. This is more easily demonstrated on the slideshow example. A mousedown anywhere outside the text box should cause it to lose focus. Fixable with JavaScript