The contentEditable Property

Internet Explorer 5.5 introduced a cool property, contentEditable , which lets the user edit the content in a web page interactively. You can see the support for this property in Table 5.15.

Table 5.15. The contentEditable Property

Property	NS2	IE5	IE5.5
`contentEditable`		x	x
	Read/Write
	Type: Boolean

Here's an example. In this case, I'll make the text in a <DIV> element named editableDIV editable:

(Listing 05-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>Editing Content</TITLE>      </HEAD>      <BODY>          <H1>Editing Content</H1>  <DIV ID="editableDIV">Edit Me!</DIV>  <SCRIPT LANGUAGE="JavaScript">              <!--  editableDIV.contentEditable = true  // -->          </SCRIPT>      </BODY>  </HTML>

You can see the results in Figure 5.6; originally, the text there was just Edit Me! , but, just as you would in a word processor, I've changed that to Edit Me Now! .

Figure 5.6. Using the `contentEditable` property.

graphics/05fig06.gif

The contentEditable Property

The contentEditable Property

Table 5.15. The contentEditable Property

(Listing 05-08.html on the web site)

Figure 5.6. Using the contentEditable property.

Figure 5.6. Using the `contentEditable` property.