jQuery Inline Edit Plugin
A small javascript library built on top of jQuery that allows you to easily do inline text editing using a text input, select, or textarea.
Usage
Load the plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js"></script> <script src="inline-edit.jquery.js"></script> HTML
<span id="example-text"><button class="btn btn-success">Click Me</button></span> JavaScript
$("#example-text").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 } }); Properties
- type (text, select, textarea) - The type of value the clicked text will turn into.
- className - A custom class to add to the created inline edit element.
- on (click, dblclick, etc.) - This is how the inline edit will be triggered
- customData - Custom properties to add to the inline edit tag
- data - Options for the select as a key:value object
- trim (true/false) - Trim whitespace around text before loading into the text input or textarea
Methods
- onChange(this, text, html) - Executes when exiting inline edit mode and a change has been made
- onEdit(this) - Executes when entering inline edit mode
- onNoChange(this) - Executes when exiting inline edit mode but no change has been made
Events
- inlineEdit.on.edit - Fires when exiting inline edit mode and a change has been made
- inlineEdit.on.change - Fires when entering inline edit mode
- inlineEdit.on.noChange - Fires when exiting inline edit mode but no change has been made
