Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Download Microsoft Edge
More info about Internet Explorer and Microsoft Edge
Sets or retrieves the string that indicates whether the user can edit the content of the object.
Content can be edited by the user.
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.
.gif)
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>
<TH><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Heading 1 <DIV></TH>
<TH><DIV CONTENTEDITABLE STYLE="height: 100%; width: 100%;">Heading 2 <DIV></TH>
</THEAD>
<TBODY>
<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>
<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>
</TBODY>
</TABLE>
The following example shows how to use the contentEditable property to control whether the user can edit the content of the object.
<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>
<BUTTON ID="oBtn" onclick="chgSpan()">Enable Editing</BUTTON>
<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
