contentEditable

Jump to: navigation, search

contentEditable

This article is Not Ready.



Summary

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


Applies to  ?

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>

View live exampleThe 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>

Notes

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 p 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 p is set to the value of true. 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 Warning:  Users can change the contents of a document 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. Windows Internet Explorer 8 and later. When a webpage is displayed in IE8 Standards mode, an object cannot receive focus when p is set to false. When pages are displayed in earlier document compatibility modes, objects can receive focus when p is false.

Syntax

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 4.0+
3.0+
5.5+
9.0+
3.1+

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 3.0+
7.0+
18.0+
15.0+
?
Unsupported
Unsupported
5.0+

See also

External resources

Related pages (MSDN)

  • 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

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]