使用Ajax将内容可编辑的内容更改另存为JSON-CSDN博客

具有contenteditable属性的元素可以直接在浏览器窗口中进行实时编辑。但是，这些更改当然不会影响服务器上的实际文档，因此这些更改不会随着页面刷新而持续。

保存数据的一种方法是等待按下返回键，然后触发该触发，然后将元素的新innerHTML作为Ajax调用发送并模糊该元素。按Escape键可将元素返回到其预编辑状态。

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;
}

请参阅CodePen上的Chris Coyier （ @chriscoyier ）撰写的Pen Contenteditable / JSON / Ajax保存。