Sisu muudetavate sisumuudatuste salvestamine JSON-iga ajaxiga - CSS-trikid

contenteditableAtribuudiga elemente saab otse brauseriaknas muuta. Kuid loomulikult ei mõjuta need muudatused teie serveri tegelikku dokumenti, nii et need muudatused lehe värskendamisel ei püsi.

Üks võimalus andmete salvestamiseks oleks oodata tagasipöördumise klahvi vajutamist, mis käivitab seejärel elemendi uue sisemiseHTML-i Ajax-kutsena ja hägustab elemendi. Escape-klahvi vajutamine viib elemendi selle eelnevalt muudetud olekusse.

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

Vaadake CodePenil Chris Contoyable / Save with JSON / Ajaxi pliiatsit Chris Coyierilt (@chriscoyier).