A jQuery utility which adds useful behaviour to `contenteditable` text
CoffeeScript Makefile Shell
Latest commit abfacad Aug 12, 2016 @davidchambers xyz@1.0.x
Failed to load latest commit information.
LICENSE restructure project Mar 2, 2013
Makefile xyz@0.5.x Nov 10, 2014
README.md initial commit Oct 19, 2011
package.json xyz@1.0.x Aug 12, 2016



contenteditable is a tiny jQuery utility which adds useful behaviour to contenteditable text.


The element with the contenteditable attribute must be wrapped by an element with a class of contenteditable. To make an h1 editable, for example, use:

<h1 class=contenteditable><span contenteditable>Romeo & Juliet</span></h1>

When a user clicks the editable text the browser inserts the caret as near as possible to the cursor. contenteditable also listens for click events on the containing element (the h1 in the above example). The event handler focuses the editable element and selects its text. To take advantage of this handler, include CSS similar to the following:

.contenteditable {
  display: inline-block;
  background: url(images/edit.png) no-repeat right;
  padding-right: 24px;

contenteditable also listens for the enter/return keystroke when text is being edited, in response to which it triggers a "contentedited" event. This custom event provides a hook for application code, which might be along these lines:

$('#play').bind('contentedited', function (event) {
  $.post('/path/to/resource', {title: $(event.target).text()})