contentEditable Property (defaults, A, ABBR, ...)

Switch View :
Classic
Lightweight
ScriptFree
CONTENTEDITABLE Attribute | contentEditable Property

Sets or retrieves the string that indicates whether the user can edit the content of the object.

Syntax

HTML <ELEMENT CONTENTEDITABLE = sCanEdit... >
Scripting [ sCanEdit = ] object.contentEditable [ = sCanEdit ]

Possible Values

sCanEdit String that specifies or receives one of the following values.
inherit
Default. Content's ability to be edited by user is inherited from object's parent.
false
Content cannot be edited by the user.
true
Content can be edited by the user.

The property is read/write. The property has a default value of inherit.

Remarks

Child elements do not inherit this attribute unless they have layout. Use the hasLayout property to determine if an object has layout.

If this attribute is applied to a BODY element, it has the same effect as setting the designMode property of the document object.

Elements with the disabled attribute set to false do not respond to the contentEditable attribute.

If this attribute is applied to the A element, the default functionality of the A element will be lost while sCanEdit is set to the value of true.

If this attribute is applied to the MARQUEE element, the default functionality of the MARQUEE element will be lost while sCanEdit is set to the value of true.

Windows Internet Explorer 8 and later. When a Web page is displayed in IE8 mode, an object cannot receive focus when sCanEdit is set to false. When pages are displayed in earlier document compatibility modes, objects can receive focus when sCanEdit is false.

Though the TABLE, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, and TR elements cannot be set as content editable directly, a content editable SPAN, or DIV element can be placed inside the individual table cells (TD and TH elements). See the example below.

security note Security Alert  Users can change the contents of a Web page when the contentEditable property is set to TRUE. Using this property incorrectly can compromise the security of your application. Incorrect use of the contentEditable property might include not validating user input. If you do not validate user input, a malicious user can inject control characters or script that can harm your data. You should take routine precautions against displaying unvalidated user input. For more information, see Security Considerations: Dynamic HTML.

Examples

In the following example, setting the DIV elements to have 100% height and width makes all content within the borders of the cells editable.


<P>Table 1 Editable</P><BR/>
<TABLE BORDER=1 WIDTH=80%>
<THEAD>
<TR>
<TH><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Heading 1 <DIV></TH>
<TH><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Heading 2 <DIV></TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Row 1, Column 1 text.<DIV></TD>
<TD><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Row 1, Column 2 text.<DIV></TD>
</TR>
<TR>
<TD><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Row 2, Column 1 text.<DIV></TD>
<TD><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Row 2, Column 2 text.<DIV></TD>
</TR>
</TBODY>
</TABLE>

The following example shows how to use the contentEditable property to control whether the user can edit the content of the object.


<HEAD>
<SCRIPT>
function chgSpan() {
    currentState = oSpan.isContentEditable;
    newState = !currentState;
    oSpan.contentEditable = newState;
    oCurrentValue.innerText = newState;
    newState==false ? oBtn.innerText="Enable Editing" :
        oBtn.innerText="Disable Editing"
}
</SCRIPT>
</HEAD>
<BODY onload="oCurrentValue.innerText = oSpan.isContentEditable;">
<P>Click the button to enable or disable SPAN content editing.</P>
<P>
<BUTTON ID="oBtn" onclick="chgSpan()">Enable Editing</BUTTON>
</P>
<P><SPAN ID="oSpan">You can edit this text.</SPAN></P>
SPAN can be edited: <SPAN ID="oCurrentValue"></SPAN>
</BODY>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/contentEditableEX2.htm

This example demonstrates the features of Internet Explorer that enable users to edit the content of an HTML element directly from the browser.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/editRegions.htm

Applies To

defaults, A, ABBR, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, hn, I, INPUT type=button, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP, Element Constructor, HTCElementBehaviorDefaults Constructor
Community Content

Hobby Developer
onclick event
In IE8 <DIV contenteditable> leftclick in a block element fx. <span style="FLOAT: left">...</span> :
1. When clicking first time the cursor changes form from arrow to cross or caret
2. When clicking second time something is actually selected, fx. image or the block
3. When clicking third time if you selected the block (and not an image) you now select text; and nomatter what selected the onclick event is now triggered

Clicking block can instead be catched with oncontrolselect

Thomas Lee
compatibility - e.g. rtf

Note that in copying from other sources to CONTENTEDITABLE, there is a slight revision to sizes: 'the old-144/150-trick':

e.g. #1. RTF:HTML
Lettering in an RTF document, as matched to HTML, e.g. 10-pitch 12-point \fs24(halfpoints) Courier to 'font:16px monospace' (aka Courier) 10px-wide, has \liN-indentation mismatched by 144/150 in HTML offsetLeft:--

In particular, RTF \li-1440 is 1 in. HTML 'margin-left:1 in.', but offsetLeft=96 (plus container padding) = 9.6px/letter instead of 10px.

Whence copying from an aligned RTF to HTML results in a purely-indented letter formerly aligned with #25, realigned to letter #24.

[This fractional calculation is probably also the cause of live-letter-squirm in MSIE.]


Stanley Roark
Clarification remark - 2 defaults - inherit v. true

N.B. The Default-action-by-absence is 'inherit' (documented above) ...

But, The Default-action-by-presence is 'true' (it does work in MSIE 6/7)--

ie.

<DIV CONTENTEDITABLE>This is editable.</DIV>


(PS. ^Find is acting bizarre on this webpage: Sometimes it only-finds within this html edit area, Sometimes it finds the several instances on the page: Even if ^Copied...!)