Ukladanie upraviteľných zmien obsahu ako JSON s Ajaxom Triky CSS

Prvky s contenteditableatribútom je možné editovať naživo priamo v okne prehliadača. Ale tieto zmeny samozrejme neovplyvnia skutočný dokument na vašom serveri, takže tieto zmeny nebudú pretrvávať pri obnovení stránky.

Jedným zo spôsobov, ako uložiť údaje, by bolo čakať na stlačenie klávesu Return, ktorý spustí, potom odošle nový vnútorný HTML prvku ako volanie Ajaxu a prvok rozostrí. Stlačením klávesu escape sa prvok vráti do vopred upraveného stavu.

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

Prezrite si Pero Contenteditable / Save with JSON / Ajax od Chrisa Coyiera (@chriscoyier) na CodePen.