Menyimpan Perubahan Konten yang dapat diedit sebagai JSON dengan Ajax - Trik CSS

Elemen dengan contenteditableatribut dapat diedit langsung di jendela browser. Tapi tentu saja perubahan itu tidak memengaruhi dokumen sebenarnya di server Anda, jadi perubahan itu tidak bertahan dengan penyegaran halaman.

Salah satu cara untuk menyimpan data adalah menunggu tombol kembali ditekan, yang memicu kemudian mengirimkan innerHTML baru dari elemen sebagai panggilan Ajax dan mengaburkan elemen. Menekan escape akan mengembalikan elemen ke status pra-edit.

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

Lihat Konten Pena yang Dapat Diedit / Simpan dengan JSON / Ajax oleh Chris Coyier (@chriscoyier) di CodePen.