Les éléments avec l' contenteditableattribut peuvent être modifiés en direct directement dans la fenêtre du navigateur. Mais bien sûr, ces modifications n'affectent pas le document réel sur votre serveur, donc ces modifications ne persistent pas avec une actualisation de la page.
Une façon de sauvegarder les données serait d'attendre que la touche de retour soit enfoncée, ce qui déclenche puis envoie le nouveau innerHTML de l'élément en tant qu'appel Ajax et brouille l'élément. Appuyer sur échapper ramène l'élément à son état pré-édité.
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; )Voir le Pen Contenteditable / Save with JSON / Ajax par Chris Coyier (@chriscoyier) sur CodePen.