The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Saving contenteditable Content Changes as JSON with Ajax

Last updated on:

Elements with the contenteditable attribute can be live-edited right in the browser window. But of course those changes don't affect the actual document on your server, so those changes don't persist with a page refresh.

One way to save the data would be to wait for the return key to be pressed, which triggers then sends the new innerHTML of the element as an Ajax call and blurs the element. Pressing escape returns the element to it's pre-edited state.

document.addEventListener('keydown', function (event) {
  var esc = event.which == 27,
      nl = event.which == 13,
      el =,
      input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA',
      data = {};

  if (input) {
    if (esc) {
      // restore state
    } else if (nl) {
      // save
      data[el.getAttribute('data-name')] = el.innerHTML;

      // we could send an ajax request to update the field
        url: window.location.toString(),
        data: data,
        type: 'post'

}, true);

function log(s) {
  document.getElementById('debug').innerHTML = 'value changed to: ' + s;

See the Pen Contenteditable / Save with JSON/Ajax by Chris Coyier (@chriscoyier) on CodePen.


  1. Schart
    Permalink to comment#

    I don’t get how to save this to the server? I tried just removing the comment signs to make the ajax work, but no luck. Anyone?

  2. Alok Saldanha
    Permalink to comment#

    What if the user pressed undo(ctrl-z or apple-z)? Then the contenteditable element is restored to its former state, but the reversion is not persisted to the database. Is there a cross-platform way to detect this?

  3. Saša
    Permalink to comment#

    in order to make it work with FF too

    document.execCommand('undo', false, null); // restore to previus state

  4. Dan
    Permalink to comment#

    How will I save the output to cookie so if I refresh and or close page the content will still be there.



  5. Jacopo
    Permalink to comment#

    Can I listen also for mouse click out of the editable content?

  6. nizam
    Permalink to comment#

    hey i am trying to store the result to databse but when i retreive the result it outputs without any formats only as a simple plain text .I am using php could any one help me,
    Thanks in advance

  7. Morten
    Permalink to comment#

    1) Why would one want to blur afterwards
    2) Why is everybody linking to that weird JS Bin – which does NOT woe ?

  8. Roman llgr
    Permalink to comment#

    Please update DEMO

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed