Taupomo turinio pakeitimų išsaugojimas kaip JSON naudojant „Ajax“ CSS-gudrybės

Elementus su contenteditableatributu galima tiesiogiai redaguoti tiesiai naršyklės lange. Tačiau, žinoma, šie pakeitimai neturi įtakos tikram jūsų serverio dokumentui, todėl atnaujinus puslapį šie pakeitimai neišlieka.

Vienas iš būdų išsaugoti duomenis būtų laukti, kol bus paspaustas grįžimo klavišas, kuris paleidžia, tada siunčia naują vidinį elementoHTML kaip „Ajax“ skambutį ir sulieja elementą. Paspaudus „escape“, elementas grąžinamas į iš anksto redaguotą būseną.

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

Žr. Chriso Coyierio (@chriscoyier) „CodePen“ rašomą švirkštimo priemonę „Contentsable / Save with JSON / Ajax“.