contenteditableÖzniteliğe sahip öğeler , doğrudan tarayıcı penceresinde canlı olarak düzenlenebilir. Ancak elbette bu değişiklikler sunucunuzdaki asıl belgeyi etkilemez, bu nedenle bu değişiklikler bir sayfa yenilemeyle devam etmez.
Verileri kaydetmenin bir yolu, dönüş tuşuna basılmasını beklemektir; bu, daha sonra öğenin yeni innerHTML'yi bir Ajax çağrısı olarak gönderir ve öğeyi bulanıklaştırır. Escape tuşuna basmak, öğeyi önceden düzenlenmiş durumuna döndürür.
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; )CodePen'de Chris Coyier (@chriscoyier) tarafından JSON / Ajax ile İçerik Düzenlenebilir / Tasarruf Edilebilir Kalemine bakın.