Чување задовољних промена садржаја као ЈСОН са Ајаком - ЦСС-трикови

Елементи са 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; )

Погледајте оловку Цонтентедитабле / Саве витх ЈСОН / Ајак, Цхрис Цоииер (@цхрисцоииер) на ЦодеПен.