HTML DOM Element contentEditable 속성

정의와 사용법

contentEditable 속성 설정 또는 요소의 내용이 편집 가능한지 반환합니다。

ヒント:요소의 내용이 편집 가능한지 확인하기 위해 isContentEditable 속성을 사용할 수도 있습니다。

기타 참조:

isContentEditable 속성

HTML contenteditable 속성

인스턴스

예제 1

이 부분은 편집 가능합니다：

<p id="myP" contenteditable="true">편집 가능합니다.</p>

"myP"이 편집 가능하면 true를 반환합니다：

document.getElementById("myP").contentEditable;

직접 시험해 보세요

예제 2

"myP"의 내용을 편집 가능으로 설정합니다：

document.getElementById("myP").contentEditable = "true";

직접 시험해 보세요

예제 3

내용 편집 가능 여부 간切换：

cinst x = document.getElementById("myP");
if (x.contentEditable == "true") {
  x.contentEditable = "false";
  button.innerHTML = "내 P를 편집 가능하게 만들어주세요!";
}
  x.contentEditable = "true";
  button.innerHTML = "내 P를 편집 불가로 만들어주세요!";
}

직접 시험해 보세요

문법

contentEditable 속성 반환：

element.contentEditable

contentEditable 속성 설정：

element.contentEditable = value

속성 값

값 설명
value
  • "true" - 내용 편집 가능
  • "false" - 내용 편집 불가
  • "inherit" - 기본 설정. 부모 요소가 편집 가능하면 편집 가능합니다.

반환 값

타입 설명
문자열 요소가 편집 가능하면 true, 아니면 false입니다。

브라우저 지원

element.contentEditable() DOM Level 1 (1998) 기능입니다。

모든 브라우저가 완전히 지원합니다：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원