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

인수
: (속성 부울값)

선택적인 속성값은 엘레멘트를 사용자가 편집할 수 있가를 나타내는 부울값이다.

true 엘레멘트를 사용자가 편집할 수 있다.
false 엘레멘트를 사용자가 편집할 수 없다.

이 속성은 읽기전용이며 디폴트값은 없다.

적용
개체scriptHTML규격IE


body 개체의 isContentEditable 속성 예제

<BODY id=bodyObj>

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

table 개체에서의 isContentEditable 속성 예제

편집할 수 있는 테이블

제목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.isContentEditable='+divObj.isContentEditable)
</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>

문서의 모든 isContentEditable 속성이 true인 엘레멘트 예제

<SCRIPT>
allCol=document.all;
str='<TABLE width=600 border=1><TR><TH></TH><TH>.nodeName</TH><TH>.id</TH><TH>.innerText</TH></TR>';
str+='<COL><COLGROUP style=text-align:center><COL><COL><COL></COLGROUP>';
for (i=0;i< allCol.length;i++){
  if (allCol[i].isContentEditable){
    str+='<TR><TD>document.all['+i+']</TD><TD>'+allCol[i].nodeName+'</TD>';
    str+='<TD>'+allCol[i].id+'</TD><TD>'+allCol[i].innerText+'</TD></TR>';
  }
}
str+='</TABLE>';
document.write(str);
</SCRIPT>