Edit in Place with JavaScript and CSS
Edit in Place with JavaScript and CSS
.
Editable Content
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.
Sortable, Editable Lists
Firefox and Safari register 'click' events after a drag causing the
field to become editable, which is undesirable. This is the same
problem with the sortable links and buttons example in
DnD Sortable Lists.
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
- alpha
- bravo
- charlie
- delta
- echo
alpha
bravo
charlie
delta
echo
bravo
charlie
delta
alpha
echo
Sort only
Sort and edit (double click)
Sort and edit (single click)
List 4
List 5
alpha
bravo
charlie
delta
echo
Drag handles
Always editable
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Copyright 2005 Tim Taylor Consulting
(license)
edit-in-place_files.zip( 49 k)