Update 2: Core methods rewritten for compatibility with browsers. Check change log for details
Update 1: Script updated considerably
There are many excellent scripts to edit something inline using javascript (like jeditable), but not many that work standalone. If you hate wanting to include a 50 KB library just for this simple functionality, you are in the right page. This script is tiny (1.7 kB minified) and works on most modern browsers
Steps:
1) Include the editable.js file in your page
2) Add the attribute class=”editable” to a division, paragraph or table cell <td>
3) Click on the element for it to turn into a text box. Update the value, and press enter to save. Press tab or click anywhere on the page to discard updates and revert to the old value
Changelog
Version 0.2
- Support for all major browsers
- Table cell editing more robust
- Added support for IE 7 and 8. Uses ie.js for support for getElementsByClassName
Initial Release
- The editable box now fits to the size of the original element. You can see that in the demo
- Support for inline table cell editing is now included (Proper layout/orientation only work in FF for now. Horribly out of place in other browsers and will be fixed later)
- Editing of an element with other HTML tags now works better
Gotchas:
1) Only one element is editable at any instant (I wanted this specific feature for a project I’m working on)
2) The text box doesn’t fit to the size of the original element (will be fixed)
Tested On:
Windows - Firefox 3.6, IE 7 & 8, Chrome
Mac - Firefox 3.6, Safari 4, Chrome
Terms:
Free to use for personal or commercial purposes, but please give credits
Notes:
I know it can always be better, and I’m just a beginner. So comments, suggestions always welcome!