사용자가 개체의 내용을 편집할 수 있는가를 부울값으로 반환하거나 지정한다.
| inherit | 디폴트이며, 모체에서 상속된 속성에따라 사용자가 개체의 내용이 편집할 수 있다. |
| false | 사용자가 개체의 내용이 편집할 수 없다. |
| true | 사용자가 개체의 내용이 편집할 수 있다. |
이 속성은 읽기/쓰기이며 디폴트값은 inherit이다.
이 속성의 디폴트 값은 inherit이며 모체 개체의 속성값을 전달받아 적용된다.
레이아웃을 가지고 있지 않으면 자식 개체들은 이 속성값을 상속받지 못한다. hasLayout 속성으로 레이아웃 되어 있는지를 판정할 수 있다.
BODY 엘레멘트에 나타나면, document 개체에 designMode 속성에서 설정한 것과 같은 효과를 갖는다.
disabled 속성이 false로 설정된 엘레멘트에서는 contentEditable 속성에 반응하지 않는다.
A, MARQUEE 엘레멘트에 이 속성이 적용되면, 속성값이 true로 설정되어 있는 동안은 A, MARQUEE 엘레멘트의 기능성을 잃게 된다.
TABLE, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR 엘레맨트들은 직접적으로 내용을 편집하게 설정될수는 없으나, 내용을 편집할 수 있는 SPAN이나 DIV 엘레맨트를 테이블 각 칸(TD, TH)에 배치시켜 편집하면 된다.
| 개체 | script | HTML | 규격 | IE |
|---|
<BODY id=bodyObj>
<SCRIPT>
document.write('contentEditable='+bodyObj.contentEditable)
</SCRIPT>
편집할 수 있는 테이블
제목1 |
제목2 |
|---|---|
줄1 - 칸1 데이터 |
줄1 - 칸2 데이터 |
줄2 - 칸1 데이터 |
줄2 - 칸2 데이터 |
<P>편집할 수 있는 테이블</P>
<TABLE border=1 width=80%>
<THEAD><TR><TH><DIV CONTENTEDITABLE STYLE="height:100%;width:100%;">제목1</DIV></TH>
<TH><DIV CONTENTEDITABLE STYLE="height:100%;width:100%;">제목2</DIV></TH></TR>
</THEAD>
<TBODY>
<TR><TD><DIV id=divObj CONTENTEDITABLE STYLE="height:100%;width:100%;">줄1 - 칸1 데이터</DIV></TD>
<TD><DIV CONTENTEDITABLE STYLE="height:100%;width:100%;">줄1 - 칸2 데이터</DIV></TD> </TR>
<TR><TD><DIV CONTENTEDITABLE STYLE="height:100%;width:100%;">줄2 - 칸1 데이터</DIV></TD>
<TD><DIV CONTENTEDITABLE STYLE="height:100%;width:100%;">줄2 - 칸2 데이터</DIV></TD> </TR>
</TBODY>
</TABLE>
<SCRIPT>
document.write('divObj.contentEditable='+divObj.contentEditable)
</SCRIPT>
<DIV id=org></DIV><BR>
<BUTTON ID="butObj" onclick="changeIt()">편집 불가능하다.</BUTTON><BR>
<SPAN ID="myObj" style="border:solid 1 blue;color:blue">이 문자열을 편집해 보라.</SPAN><BR>
myObj.contentEditable=<SPAN ID="curVal" style="color:blue"></SPAN>
<SCRIPT>
curVal.innerText=myObj.isContentEditable;
org.innerHTML='myObj.contentEditable='+myObj.contentEditable+'<BR>myObj.isContentEditable='+myObj.isContentEditable;
function changeIt() {
currentState=myObj.isContentEditable;
newState=!currentState;
myObj.contentEditable=newState;
curVal.innerText=newState;
if(newState==true){
butObj.innerText='편집 가능하다.';
} else {
butObj.innerText='편집 불가능하다';
}
}
</SCRIPT>