May 22, 2000 - Making Elements Editable

Yehuda Shiran May 22, 2000
Making Elements Editable
Tips: May 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Internet Explorer supports editable regions within an HTML document. Any element in a document can be switched into edit mode without reloading the document. The edit mode can also be switched off per element, without reloading the document. One of the benefits of this new capability is the ability to design and modify a form, without reloading the document for every change. The switching is done via the contentEditable property:

object.contentEditable [= sEditable];

where sEditable can be one of three possible values:

inherit. Default value. Object inherits from its parent the ability of the content to be edited by the user.
  • false. Content cannot be edited.
  • true. Content can be edited by the user.

    The following example shows a simple DIV element that the user can edit. Let see the code first:

    <HTML>
<HEAD>
</HEAD>
<BODY>
<DIV ID="oDiv">Try editing this line...</DIV>
<SCRIPT>
<!--
oDiv.contentEditable = true;
// -->
</SCRIPT>
</BODY>
</HTML>

    and now let's demo the script. Here is the line to be edited:

    Try editing this line...

    Were you able to edit the line above?

    The following example shows a simple DIV element that the user cannot edit. Let's see the code first:

    <HTML>
<HEAD>
</HEAD>
<BODY>
<DIV ID="oDiv">Try editing this line...</DIV>
<SCRIPT>
<!--
oDiv.contentEditable = false;
// -->
</SCRIPT>
</BODY>
</HTML>

    and now let's demo the script. Here is the line to be edited:

    Try editing this line...

    Were you able to edit the line above?