Guardar cambios de contenido satisfactorios como JSON con Ajax - Trucos CSS

Los elementos con el contenteditableatributo se pueden editar en vivo directamente en la ventana del navegador. Pero, por supuesto, esos cambios no afectan el documento real en su servidor, por lo que esos cambios no persisten con una actualización de página.

Una forma de guardar los datos sería esperar a que se presione la tecla de retorno, que se activa y luego envía el nuevo innerHTML del elemento como una llamada Ajax y desenfoca el elemento. Al presionar escape, el elemento vuelve a su estado preeditado.

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

Vea Pen Contenteditable / Save with JSON / Ajax de Chris Coyier (@chriscoyier) en CodePen.