Skip to content

Instantly share code, notes, and snippets.

@qwzybug

qwzybug/content-editable.html

Created September 8, 2009 22:38
Show Gist options
  • Save qwzybug/183284 to your computer and use it in GitHub Desktop.
Save qwzybug/183284 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal inline editing example. Video http://gallery.me.com/wyntir#100163
Raw
content-editable.html
<html>
<head>
<title>MadLib</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.field { text-decoration: underline; }
</style>
</head>
<body>
<p>
I am the very <span class="field" id="model">model</span>
of a <span class="field" id="modern">modern</span>
major <span class="field" id="general">general</span>.
<input type="button" onclick="submit();" value="Go" />
</p>
<script type="text/javascript">
$('.field').each(function() {
this.contentEditable = true;
});
function submit() {
alert("You said: '" + $('#model').text()
+ "' and '" + $('#modern').text()
+ "' and '" + $('#general').text() + "'.");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment