Сохранение изменений содержимого в формате JSON с помощью Ajax - CSS-хитрости

Элементы с 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; )

Смотрите Pen Contenteditable / Save with JSON / Ajax Криса Койера (@chriscoyier) на CodePen.