2010-02-03 09:59:46 +01:00
<!DOCTYPE html>
< html lang = "en" xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / >
< title > HTML5 Demo: contenteditable< / title >
< style >
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}
section, header, footer {
display: block;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
2010-03-02 23:21:15 +01:00
border-radius: 10px;
2010-02-03 09:59:46 +01:00
border-top: 1px solid #fff;
padding-bottom: 76px;
}
h1 {
padding-top: 10px;
}
h2 {
font-size: 100%;
font-style: italic;
}
#wrapper > * > * {
margin: 20px;
}
input {
font-size: 16px;
padding: 3px;
margin-left: 5px;
}
footer > * {
color: #999;
}
article div {
margin: 10px 0;
}
label {
float: left;
display: block;
width: 125px;
line-height: 32px;
}
[contenteditable]:hover {
outline: 1px dotted #ccc;
}
< / style >
< script src = "h5utils.js" > < / script >
< / head >
< body >
< div id = "wrapper" >
< article >
< section >
< header >
< h1 > ContentEditable< / h1 >
< / header >
< p > Any elements with the < code > contenteditable< / code > attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes.< / p >
< p > < small > Note that since Opera doesn't support storage, the changes won't save.< / small > < / p >
< / section >
< section id = "editable" contenteditable = "true" >
< h2 > Go ahead, edit away!< / h2 >
< p > Here's a typical paragraph element< / p >
< ol >
< li > and now a list< / li >
< li > with only< / li >
< li > three items< / li >
< / ol >
< / section >
< div >
< input type = "button" id = "clear" value = "Clear changes" / >
< / div >
< / article >
< footer > < a href = "/" > HTML5 demo< / a > < / footer >
< / div >
< script >
var editable = document.getElementById('editable');
addEvent(editable, 'blur', function () {
// lame that we're hooking the blur event
localStorage.setItem('contenteditable', this.innerHTML);
document.designMode = 'off';
});
addEvent(editable, 'focus', function () {
document.designMode = 'on';
});
addEvent(document.getElementById('clear'), 'click', function () {
localStorage.clear();
window.location = window.location; // refresh
});
if (localStorage.getItem('contenteditable')) {
editable.innerHTML = localStorage.getItem('contenteditable');
}
< / script >
< script >
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
< / script >
< script >
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}< / script >
< / body >
< / html >