Các phần tử có contenteditablethuộc tính có thể được chỉnh sửa trực tiếp ngay trong cửa sổ trình duyệt. Nhưng tất nhiên những thay đổi đó không ảnh hưởng đến tài liệu thực tế trên máy chủ của bạn, vì vậy những thay đổi đó không tồn tại khi làm mới trang.
Một cách để lưu dữ liệu là đợi phím trả về được nhấn, thao tác này sẽ kích hoạt sau đó sẽ gửi InternalHTML mới của phần tử dưới dạng lệnh gọi Ajax và làm mờ phần tử. Nhấn phím thoát sẽ trả lại phần tử về trạng thái được chỉnh sửa trước.
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; )Xem Bút có thể nội dung / Lưu với JSON / Ajax của Chris Coyier (@chriscoyier) trên CodePen.