HTML DOM의 isContentEditable 속성은 특정 요소의 콘텐츠가 사용자에 의해 수정 가능한지 여부를 확인하고 그 결과를 불리언(Boolean) 값으로 반환합니다. 이 속성은 contenteditable 전역 속성이 설정된 요소뿐만 아니라, 부모 요소로부터 편집 가능 여부를 상속받은 경우에도 정확한 상태를 알려줍니다.
문법(Syntax)
isContentEditable 속성의 기본 사용 문법은 다음과 같습니다.
HTMLElementObject.isContentEditable
이 속성은 별도의 매개변수 없이 호출하며, 읽기 전용(read-only) 속성이므로 값을 직접 설정할 수는 없습니다.
반환되는 불리언 값
isContentEditable 속성은 아래 표와 같이 두 가지 값을 반환합니다.
| 반환 값 | 설명 |
|---|---|
| true | 해당 요소(HTMLElementObject)의 콘텐츠가 편집 가능함을 의미합니다. |
| false | 해당 요소(HTMLElementObject)의 콘텐츠가 편집 불가능함을 의미합니다. |
예제 코드
다음 예제는 isContentEditable 속성을 활용하여 폼 제출 후 입력 필드의 편집 가능 상태를 확인하고, 이를 기반으로 필드를 비활성화하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>isContentEditable</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>isContentEditable</legend>
<label for="textSelect">이름:
<input type="text" id="textSelect" contentEditable="true" placeholder="홍길동">
</label><br>
<label for="emailSelect">이메일:
<input type="email" id="emailSelect" placeholder="user@example.com">
</label>
<input type="button" onclick="confirmtext()" value="제출">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputText = document.getElementById("textSelect");
var inputEmail = document.getElementById("emailSelect");
divDisplay.textContent = '안내: 제출 후에는 이메일을 수정할 수 없습니다';
function confirmtext() {
inputEmail.disabled = !inputEmail.isContentEditable;
inputText.disabled = !inputText.isContentEditable;
divDisplay.textContent = '정보가 제출되었습니다';
}
</script>
</body>
</html>코드 설명
위 예제에서 이름(name) 입력 필드에는 contentEditable="true" 속성이 설정되어 있어 편집 가능한 상태입니다. 반면 이메일(email) 필드는 일반 입력 필드로, isContentEditable이 false를 반환합니다.
'제출' 버튼을 클릭하면 confirmtext() 함수가 실행됩니다. 이 함수 내부에서 각 입력 필드의 isContentEditable 값을 확인하고, NOT 연산자(!)를 통해 그 결과를 뒤집어 disabled 속성에 할당합니다. 즉, 편집 가능한 필드는 비활성화되고, 이미 편집 불가능한 필드는 그대로 유지됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'제출' 버튼 클릭 전:
'제출' 버튼 클릭 후:
정리
isContentEditable 속성은 웹 에디터나 폼 유효성 검사처럼 요소의 편집 가능 여부에 따라 동적으로 UI를 제어해야 하는 상황에서 매우 유용합니다. 브라우저 호환성도 뛰어나 대부분의 최신 브라우저에서 안정적으로 사용할 수 있습니다.