Double Click/Tap To Edit Plugin With jQuery - Editable

A simple yet customizable jQuery inline editing plugin which converts any HTML element into a textarea so that you can edit the content just like the contenteditable element.

Double click/tap on the desired element to start the edit mode. Also provides a callback function which will be fired after the content of the element is changed.

How to use it:

1. Load the minified version of the jQuery Editable plugina fter loading jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.editable.min.js"></script>

2. Call the function editable() to make an element editable.

$(function(){
  $('.editable').editable();
});

3. Customize the trigger event to start editing. Default: 'dblclick'.

$('.editable').editable({
  event: 'dblclick'
});

4. Enable/disable the touch support. Default: true.

$('.editable').editable({
  touch : true
});

5. Exit the edit mode when pressing Enter key. Default: true.

$('.editable').editable({
  closeOnEnter : false
});

6. Determine whether or not to convert \n to <br />. Default: true.

$('.editable').editable({
  lineBreaks : true
});

7. Customize the message when there is no content in the editable element.

$('.editable').editable({
  emptyMessage : '<em>Please write something...</em>'
});

8. Execute a function when the textarea is blurred.

$('.editable').editable({
  callback : function( data ) {
    console.log('Stopped editing ' + data.$el[0].nodeName );
    if( data.content )
    console.log('* The text was changed');
  }
});

9. Execute a function when the data is changed.

$('.editable').editable(function(data) {
  if( data.text ) {
    // returns the new text
  }
});

10. Check if the element is editing & editable.

var $elem = $('.editable');
if( $elem.is(':editing') ) {
  // do something
}
if( $elem.is(':editable') ) {
  // do something
}

11. Start/exit the edit mode programatically.

$('.anotherElement').editable('open');
$('.anotherElement').editable('close');

12. Disable/destroy the plugin

$('.anotherElement').editable('destroy');

---

This awesome jQuery plugin is developed by bigtiger1. For more Advanced Usages, please check the demo page or visit the official website.