Запазване на доволни промени в съдържанието като JSON с Ajax - CSS-трикове

Елементите с contenteditableатрибута могат да бъдат редактирани на живо директно в прозореца на браузъра. Но разбира се тези промени не засягат действителния документ на вашия сървър, така че тези промени не продължават с опресняване на страницата.

Един от начините за запазване на данните би бил да изчакате натискането на клавиша за връщане, който задейства след това изпраща новия вътрешенHTML на елемента като извикване на Ajax и размазва елемента. Натискането на escape връща елемента в предварително редактирано състояние.

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

Вижте Pen Contenteditable / Save with JSON / Ajax от Chris Coyier (@chriscoyier) на CodePen.