Back to post

JqInlineEdit is a very simple and lightweight Html inline editing 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:

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:

Property Type Options Default Description
type string text, select, textarea text The type of value the clicked text will turn into.
className string null A custom class to add to the created inline edit element.
on string Any jQuery trigger
[click, dblclick, etc.]		 click This is how the inline edit will be triggered
customData object null Custom properties to add to the inline edit tag
data object null Options for the select as a key:value object
trim bool true/false true Trim whitespace around text before loading into the text input or textarea

Methods

Method Values Description
onChange(this, text, html)
  • this: the original element with the new value
  • text: the new value
  • html: the html and text of the new value
 Executes when exiting inline edit mode and a change has been made
onEdit(this)
  • this: the original element with the new value
 Executes when entering inline edit mode
onNoChange(this)
  • this: the original element with the new value
 Executes when exiting inline edit mode but no change has been made

Events

Event Description
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

Example Input

HTML structure

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

Script

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

Example Textarea

HTML structure

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

Script

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

Example Select

HTML structure

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

Script

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

Editable Paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

HTML structure

<span class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>

Script

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