ObscureTags.com: IE CONTENTEDITABLE Attribute example

<p>
This came up on Digg when someone was talking about going to any website
and make it editable by typing the following into your browser:<br/>
<a href="javascript:document.body.contentEditable='true'; document.designMode='on'; void 0">javascript:document.body.contentEditable='true'; document.designMode='on'; void 0</a>
</p>

<p>Just hit the link and rewrite this page. The effect should work in both IE and Firefox.</p>

<p>
What makes this technological miracle possible? Why it's the contentEditable attribute -- not exactly a tag, but one
of those oddball features that's sort of in the spec, sort of not. The ability to edit inline content appears to be a <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/contenteditable.asp" target="contented">microsoft innovation</a>
that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=97284">Mozilla did not want to follow</a>.
</p>

<p>In IE, you just bust out "contenteditable" block level attribute
to impliment your editor. Try it out by typing your changes into the table itself below. </p>

<hr/>

<p>The Best Walther Matthau Movies (Edit and Change as Needed)</p><br/>

<table border=1 width=80%>
  <thead>
    <tr>
      <th><div contenteditable style="height: 100%; width: 100%;">Serious <div></th>
      <th><div contenteditable style="height: 100%; width: 100%;">Funny<div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div contenteditable style="height: 100%; width: 100%;">Taking of Pelham One Two Three </div></td>
      <td><div contenteditable style="height: 100%; width: 100%;">Charlie Varney </div></td>
    </tr>
    <tr>
      <td><div contenteditable style="height: 100%; width: 100%;">Cactus Flower</div></td>
      <td><div contenteditable style="height: 100%; width: 100%;">The Bad News Bears</div></td>
    </tr>
  </tbody>
</table>

<hr/>

<p>Thanks to <a href="http://digg.com/users/utcursch/news/dugg" target="digg">utcursch</a> for a 'lil background on all this...
</p>
<p>
If you want to see a really goofy page editing demo using this feature in IE, go to 
<a href="http://www.xmlportfolio.com/temp/contentEditable.html" target="xmlport">www.xmlportfolio.com/temp/contentEditable.html</a>.
That d00d is even rockin' the <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/execCommand.asp" target="execCommand">execCommand</a>
javascript stuff in IE. 
</p>

Name:
URL:
MSG:	1000 Characters max. HTML will be entitized. We record your IP.
The number of the beast =

Source:

Comments: