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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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?


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business