Salvataggio delle modifiche ai contenuti modificabili come JSON con Ajax - Trucchi CSS

Gli elementi con l' contenteditableattributo possono essere modificati in tempo reale direttamente nella finestra del browser. Ma ovviamente queste modifiche non influiscono sul documento effettivo sul tuo server, quindi tali modifiche non persistono con un aggiornamento della pagina.

Un modo per salvare i dati sarebbe attendere che venga premuto il tasto Invio, che attiva, quindi invia il nuovo innerHTML dell'elemento come una chiamata Ajax e sfoca l'elemento. Premendo Esc, l'elemento torna al suo stato pre-modificato.

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

Vedi Pen Contenteditable / Save with JSON / Ajax di Chris Coyier (@chriscoyier) su CodePen.