Using the content Editable Property : DIV Style : HTML : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
JavaScript DHTML Home »  HTML   » [  DIV Style  ]   
 



Using the content Editable Property

Please note that some example is only working under IE or Firefox.


/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.normal {color: black}
.editing {color: red}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function toggleEdit() {
    var newState = !editableText.isContentEditable
    editableText.contentEditable = newState
    editableText.className = (newState"editing" "normal"
    editBtn.innerText = (newState"Disable Editing" "Enable Editing"
}
</SCRIPT>
<BODY>
<H1>Editing Contents</H1>
<HR>
<P>Turn on editing to modify the following text:</P>
<DIV ID="editableText">Edit this text on the fly....</DIV>
<P><BUTTON ID="editBtn" onClick="toggleEdit()" onFocus="this.blur()">
Enable Editing
</BUTTON></P>
</BODY>
</HTML>
           
       
Related examples in the same category
1.  Div align Example
2.  Using clientHeight and clientWidth Properties








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.