Notice Hey there! Have you seen my super awesome form validation plugin?

jQuery Editable

This plugin makes it possible to edit the content of an element simply by double clicking on it.

How does it work?

Dobule click on an element and it turns into a textarea. The content of the element is now displayed in the textarea. When you’re done editing all you have to do is to click some where outside the textarea and the content will be added to the DOM. You can toggle the size of the font by pressing the keys cmd + ↑ or cmd + ↓ while editing the content (ctrl-key instead of cmd if you’re on windows).

Live example

Double click on the text to edit (double tap on touch devices)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

The example above is implemented by the following code:

Other code examples

The callback function

The first argument passed along to the callback function is an object containing the following properties:

  • text — Either false or the new text if the text was changed (this text may contain HTML)
  • fontSize — Either false or the new font size, if changed.
  • $el — Reference to the element (jQuery) that was edited