contenteditableविशेषता वाले तत्व ब्राउज़र विंडो में लाइव-एडिट किए जा सकते हैं। लेकिन निश्चित रूप से वे परिवर्तन आपके सर्वर पर वास्तविक दस्तावेज़ को प्रभावित नहीं करते हैं, इसलिए उन परिवर्तनों को पृष्ठ ताज़ा करने के लिए जारी नहीं है।
डेटा को बचाने का एक तरीका यह होगा कि रिटर्न कुंजी को दबाए जाने का इंतजार किया जाए, जो तब ट्रिगर करता है जो तत्व के नए इनरबॉट्स को अजाक्स कॉल के रूप में भेजता है और तत्व को धुंधला करता है। भागने वाला दबाने से पूर्व-संपादित स्थिति का तत्व वापस आ जाता है।
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 पर क्रिस कॉयर (@chriscoyier) द्वारा JSON / Ajax के साथ पेन कंटेटटेबल / सेव देखें।