Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A jQuery utility which adds useful behaviour to `contenteditable` text
CoffeeScript Shell
Branch: master
Failed to load latest commit information.
lib prevent horizontal scrolling
.gitignore makefile: integrate xyz
package.json xyz@0.5.x


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: $(})
Something went wrong with that request. Please try again.