사용자가 개체의 내용을 편집할 수 있는가를 부울값으로 반환하거나 지정한다.

인수
: (속성 부울값)
속성값은 사용자가 개체의 내용을 편집할 수 있는가를 나타내는 부울값이다.

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)에 배치시켜 편집하면 된다.

보안 주의 : 문서의 contentEditable 속성을 true로 설정해 놓으면 사용자들이 내용을 변경시킬 수 있다. 이 속성을 잘못 설정하면, 확인되지 않은 입력으로 제어 문자나 스크립트등을 사이트에 해를 줄 수 있으므로 주의깊게 사용하여야 한다.

적용
개체scriptHTML규격IE


body 개체의 contentEditable 속성 예제

<BODY id=bodyObj>

<SCRIPT>
document.write('contentEditable='+bodyObj.contentEditable)
</SCRIPT>

table 개체에서의 contentEditable 속성 예제

편집할 수 있는 테이블

제목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>

사용자 편집 제어용 contentEditable, isContentEditable 속성 예제



이 문자열을 편집해 보라.
myObj.contentEditable=
<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>