Inline Editing With Input, Select And Textarea - jqInlineEdit

A small yet robust inline editing plugin for jQuery that makes an element act as an input field, select box or textarea when a specific event is triggered.

Comes with several callback functions and event handles that can be used to save the changes via AJAX whe needed.

Basic usage:

1. Load the JavaScript inline-edit.jquery.js after loading jQuery library and we're ready to go.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="inline-edit.jquery.js"></script>

2. Make an element editable through an input field.

<div class="input">
  <button>Click Me</button>
</div>

$(".input").inlineEdit({
  type: 'text'
});

3. Make an element editable through a select box where the users are able to select predefined data from a dropdown.

<div class="select">
  <button >Click Me</button>
</div>

$(".select").inlineEdit({
  type: 'select',
  data: {
    'default': 'Click Me',
    'opt-1': 'jQuery',
    'opt-2': 'Script'
  }
});

4. Make an element editable through a textarea element.

<div class="textarea">
  <button >Click Me</button>
</div>

$(".textarea").inlineEdit({
  type: 'textarea'
});

5. Add an extra CSS class to the editable element.

$(".textarea").inlineEdit({
  className: null
});

6. Decide whether to trim whitespace around text.

$(".textarea").inlineEdit({
  trim: true
});

7. Specify the trigger event (Default: click).

$(".textarea").inlineEdit({
  on: 'dblclick'
});

8. Available event handlers.

$(".textarea").inlineEdit({
  onChange: function (el, theText, theHtml) {
  },
  onEdit: function (el) {
  },
  onNoChange: function (el) {
  }
});

---

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