Shranjevanje vsebinskih sprememb vsebine kot JSON z Ajaxom - CSS-triki

Elemente z contenteditableatributom lahko urejate neposredno v oknu brskalnika. Seveda pa te spremembe ne vplivajo na dejanski dokument na vašem strežniku, zato te spremembe ne ostanejo pri osvežitvi strani.

Eden od načinov za shranjevanje podatkov bi bil počakati, da se pritisne tipka za vrnitev, ki nato sproži nov notranji HTML elementa kot klic Ajax in element zamegli. S pritiskom na escape se element vrne v predhodno urejeno stanje.

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

Glejte Pen Contenteditable / Save with JSON / Ajax Chrisa Coyierja (@chriscoyier) na CodePen.