Saglabājot satura rediģējamas satura izmaiņas kā JSON ar Ajax - CSS-triki

Elementus ar contenteditableatribūtu var rediģēt tieši pārlūkprogrammas logā. Bet, protams, šīs izmaiņas neietekmē faktisko dokumentu jūsu serverī, tāpēc šīs izmaiņas netiek saglabātas, atsvaidzinot lapu.

Viens no datu saglabāšanas veidiem būtu gaidīt atgriešanās taustiņa nospiešanu, kas iedarbina jauno elementa iekšējoHTML kā Ajax zvanu un aizmiglo elementu. Nospiežot escape, elements tiek atgriezts iepriekš rediģētajā stāvoklī.

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

Skatiet Kriss Koijers (@chriscoyier), kas satur CodePen Pen Contenteditable / Save with JSON / Ajax.