Elementen met het contenteditableattribuut kunnen rechtstreeks in het browservenster live worden bewerkt. Maar die wijzigingen hebben natuurlijk geen invloed op het daadwerkelijke document op uw server, dus die wijzigingen blijven niet bestaan bij het vernieuwen van de pagina.
Een manier om de gegevens op te slaan, is door te wachten tot de Return-toets wordt ingedrukt, die vervolgens de nieuwe innerHTML van het element als een Ajax-aanroep verzendt en het element vervaagt. Door op escape te drukken, keert het element terug naar de vooraf bewerkte staat.
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; )Zie de Pen Contenteditable / Save with JSON / Ajax door Chris Coyier (@chriscoyier) op CodePen.