jQuery contenteditable.js Plugin Examples

Basic examples. Click on me to edit. Press 'ESC' or 'Tab' or click anywhere else to finish editing.

This is a multi-line paragraph.
It also gets selected automatically.

This sample fires alert each time changed content is supposed to be saved (e.g. sent to server). It is currently set up to fire after 800ms delay of not typing anything.

Validation and styling

This paragraph gets scaled font-size when editing.
It assigns some css styles to ".ui-editable-editing" class to do so.

This sample forbids empty values. Try removing its content.
Try also typing any word, waiting until it's saved (alerted), clear it and finish editing. A valid content should be restored.
It highlights empty block with red background and returns valid content back after attempt to save invalid value.

And this is a more complex editable field. You can click anywhere on the block, but only the link text below gets edited.
Still the link gets opened when clicking on it.
Read more: Download Page