HTML and CSS Reference
In-Depth Information
Using the contenteditable attribute, you can create a simple text editor that
saves changes on the client. For this example, create a new HTML file named
edit.html and fill it with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Contenteditable and localSt-
orage demo</title>
<script type="text/javascript" sr-
c="js/script.js"></script>
</head>
<body>
<section id="editable">This text may
be edited and the changes will
be
saved locally.</section>
<button id="startEditBtn">Turn edit-
ing on</button>
<button id="stopEditBtn">Turn edit-
ing off and save changes</button>
<button
id="clearBtn">Clear
changes!</button>
</body>
</html>
__________
2 See http://dev.w3.org/html5/webstorage/ .
Now create a new JavaScript file named script.js and place it in a directory
named js that is in the same location as edit.html . Fill it with the following script:
var editable; // variable for editable area
// initialize the variables and add event handlers
function init()
{
editable = document.getElementById('editable');
var
startEditBtn
=
docu-
ment.getElementById('startEditBtn');
 
Search WWH ::




Custom Search