Sisältöön muokattavien sisältömuutosten tallentaminen JSON-muodossa Ajax - CSS-temppuja

contenteditableMääritettä sisältäviä elementtejä voi muokata suoraan selainikkunassa. Mutta tietysti nämä muutokset eivät vaikuta todelliseen asiakirjaan palvelimellasi, joten muutokset eivät jatku sivun päivityksen yhteydessä.

Yksi tapa tallentaa tiedot olisi odottaa palautusnäppäimen painamista, joka laukaisee ja lähettää sitten elementin uuden sisäisenHTML: n Ajax-puheluna ja sumentaa elementin. Esc-näppäimen painaminen palauttaa elementin ennalta muokattuun tilaan.

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

Katso Chris Coyierin (@chriscoyier) kynä Contentsitable / Save with JSON / Ajax -koodilla CodePen.