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

Elemen dengan contenteditableatribut dapat diedit secara langsung di tetingkap penyemak imbas. Tetapi tentu saja perubahan tersebut tidak mempengaruhi dokumen sebenar di pelayan anda, jadi perubahan tersebut tidak akan berterusan dengan penyegaran halaman.

Salah satu cara untuk menyimpan data adalah dengan menunggu butang kembali ditekan, yang mencetuskan kemudian menghantar HTML baru dalaman elemen sebagai panggilan Ajax dan mengaburkan elemen. Menekan pelarian mengembalikan elemen ke keadaannya yang telah diedit.

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 Pen Berpantang / Simpan dengan JSON / Ajax oleh Chris Coyier (@chriscoyier) di CodePen.