Forum Moderators: open
<!DOCTYPE html>
<html>
<head>
<title>Developer Drive | Allowing Users to Edit Text Content with HTML5 | Demo</title>
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML=localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">
<p>This is a demo to accompany the following tutorial: <a href="http://www.example.com/2012/06/allowing-users-to-edit-text-content-with-html5">Allowing Users to Edit Text Content with HTML5</a></p>
<hr />
<div id="edit" contenteditable="true">Here is the element's original content</div>
<p><input type="button" value="save my edits" /></p>
<div id="update">Edit the text and click to save for next time</div>
</body>
</html>[edited by: not2easy at 2:36 am (utc) on Oct 10, 2020]
[edit reason] Please see ToS [webmasterworld.com] [/edit]
