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()})
})