Any elements with the
this will work on latest browsers only
HTML5 Demo: ContentEditable
code goes here :
step 1 : copy and paste below code in notepad and save as example.html
step 2 : open it in browser and try to select the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: ContentEditable</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p></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>
<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>
<footer></footer>
</section>
<script src="js/prettify.packed.js"></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>
contenteditable 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.this will work on latest browsers only
ContentEditable
Go ahead, edit away!
Here's a typical paragraph element- and now a list
- with only
- three items
code goes here :
step 1 : copy and paste below code in notepad and save as example.html
step 2 : open it in browser and try to select the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: ContentEditable</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p></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>
<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>
<footer></footer>
</section>
<script src="js/prettify.packed.js"></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>
No comments:
Post a Comment
Do you think it could be useful for you? Share your thoughts with us!