contentEditable Property

calendar November 3, 2009

Value: Boolean

Compatibility: WinIE5.5+

Element tags can include a contentEditable attribute , whose value is echoed via the contentEditable property of the element. The default value for this property is inherit , which means that the property inherits whatever setting this property has in the hierarchy of HTML containers outward to the body. If you set the contentEditable property to true that element and all nested elements set to inherit the value become editable, conversely a setting of false turns off the option to edit the content.

Code:

<html>
 <head>
 <title>contentEditable property</title>
 <style type="text/css">
 .normal{color:black;}
 .editing{color:red}
 </style>
 <script type="text/javascript">
 function toogleEdit()
 {
   var newState = !editableText.isContentEditable;
   editableText.contentEditable = newState;
   editableText.className = (newState) ? "editing" : "normal";
   editBtn.innerText = (newState) ? "Disable Editing" :"Enable Editing";
 }
 </script>
 </head>
 <body>
 <h1>Editing Contents</h1>
 <hr />
 <p>Turn on editing to modify the follolwing text:</p>
 <div id="editableText">
 Edit this text on the fly...
 </div>
 <p>
 <button id="editBtn" onclick="toogleEdit()" onfocus="this.blur()">Enable Editing</button>
 </p>
 </body>
 </html>

Related items: isContentEditable property

admin Javascript

Leave a Reply

You must be logged in to post a comment.