jQuery Plugin For Editable Html Elements - trocar.js

File Size: 4.57KB
Views Total: 1111
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.

'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.

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