Elementele cu contenteditableatributul pot fi editate în direct chiar în fereastra browserului. Dar, desigur, aceste modificări nu afectează documentul real de pe serverul dvs., astfel încât aceste modificări nu persistă cu o reîmprospătare a paginii.
O modalitate de a salva datele ar fi să așteptați apăsarea tastei de returnare, care declanșează apoi trimite noul HTML interioară al elementului ca apel Ajax și estompează elementul. Apăsând escape, elementul revine la starea pre-editată.
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; )Vedeți Pen Contenteditable / Save with JSON / Ajax de Chris Coyier (@chriscoyier) pe CodePen.