Simple jQuery Inline HTML Editing Plugin – jqInlineEdit

JqInlineEdit is a very simple and lightweight inline editing html plugin that allows you to edit any inline text using an input field, select box or textarea. When triggered on a specific element it will converts to input, select or textarea where you can edit the text and after editing the text it will revert to its previous state.

Features:

• Very useful and easy to use.
• Supports on all modern devices and browsers.
• It has several callback functions.
• Supports input, textarea and a select box.

How to use it:

1. Include the jQuery inline-edit.jquery.js at the bottom of the web page.

<script src="path/to/inline-edit.jquery.js"></script>

2. Add the basic HTML to the page.

<span class="input"><button class="btn btn-success">Click me to edit</button></span>

3. Initialize the plugin and we’re ready to go.

$(".input").inlineEdit({
  type: 'text',
  onChange: function (e, text, html) {
    // Executes when exiting inline edit mode and a change has been made
  },
  onEdit: function (e) {
    // Executes when entering inline edit mode
  },
  onNoChange: function (e) {
    // Executes when exiting inline edit mode but no change has been made
  }
});

Plugin’s default options:

Methods

Events