Simple Inline Editing with jQuery Editable Plugin

jQuery-editable is a tiny jQuery plugin that adds inline text editing to any HTML element through double-clicks. It can be useful for tasks like editing user profile data, in-place content updates, or creating simple content management systems.

The plugin transforms text elements into interactive inputs while preserving the original content. Users can edit text by double-clicking, make changes, and submit updates by pressing Enter or clicking outside. 

How to use it:

1. Download the package and load the jquery-editable.js file in your document after you've included jQuery.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jquery-editable plugin -->
<script src="/path/to/dist/jquery-editable.js"></script>

2. If you're using a CommonJS environment, you can install it using npm or yarn:

# NPM
npm install --save jquery-editable

# Yarn
yarn add jquery-editable

const $ = require("jquery")
$.fn.editable = require("jquery-editable");

3. Call the function 'editable' on the target element:

<span class="editable">Double Click </span> to Edit.

$(".editable").editable({
  // options here
})

4. Monitor text updates through the onChange callback:

$(".editable").editable({
  onChange(val, oldVal) {
    console.log('New Value: ' + val);
    console.log('Old Value: ' + oldVal)
  }
})

5. If you need to restrict input types, such as only accepting numbers, you can customize the input HTML:

$(".editable").editable({
  inputHTML: "<input type='number' min='0' step='1' />",
})

6. You can even change what users click on to trigger the edit mode. By default, it’s the element itself, but you can set it to the parent:

$(".editable").editable({
  clickTarget: "parent",
})

---

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