Grow your CSS skills. Land your dream job.

Last updated on:

Saving contenteditable Content Changes as JSON with Ajax

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 = event.target,
      input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA',
      data = {};

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

      // we could send an ajax request to update the field
      /*
      $.ajax({
        url: window.location.toString(),
        data: data,
        type: 'post'
      });
      */
      log(JSON.stringify(data));

      el.blur();
      event.preventDefault();
    }
  }
}, true);

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

Live demo on JS Bin by Remy Sharp.

Comments

  1. 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. 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.

    Thanks

    Dan

  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 ?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".