jQuery Plugin For Editable Html Elements - trocar.js

trocar.js is a simple jQuery plugin for converting an html element into a editable area on focus that allows the user to add, remove or edit any text content within it.

See also:

• jQuery Plugin For Editable Field On Hover Over - liveeditor
• jQuery Based Inplace Html5 Rich Text Editor - Popline
• jQuery Plugin For In-Place Editing of Data - jinplace
• jQuery Plugin for Inline Editable Text Field - inlineeditableform
• Simple Content Editable Plugin with jQuery - contenteditable
• In-place Editing Javascript Library - X-editable

Basic Usage:

1. Make sure to load the jQuery javascript library and jQuery trocar plugin in the head section of your web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.trocar.js"></script>

2. Create an Html element that will be editable on focus.

<p class="demo"> I'm an example text editable when you focus. </p>

3. Call the plugin with options.

<script>
$('.demo').trocar({
'on': 'focus', // Event name used to start the editing mode, by default when you focus. You can set any event or always to have it initialized just on load. When an element is in editing mode it has the css class "trocar-editable"
'off': 'blur', // Event name used to fire the change event, by default when you blur.
'endOnEnter': true, // If true just finish the editing mode when you press enter.
'filterPaste': true // If true when you paste some content its just going to use its innerText instead of the html.
}); 
</script>

---

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