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>
__________
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