HTML DOM의 readOnly 속성은 HTML 문서에서 <textarea> 요소의 내용을 사용자가 수정할 수 없는 읽기 전용 상태로 만들지 여부를 확인하거나 변경하는 데 사용됩니다.
readOnly 속성의 동작 방식
readOnly 값이 true로 설정되면 사용자는 텍스트 영역의 내용을 볼 수는 있지만 직접 편집할 수 없습니다. 반대로 false이면 일반적인 입력 필드처럼 내용을 자유롭게 수정할 수 있습니다.
readOnly와 disabled의 차이점
두 속성 모두 사용자의 입력을 막지만 차이가 있습니다. readOnly는 포커스를 받고 텍스트를 선택·복사할 수 있으며, 폼 제출 시에도 값이 함께 전송됩니다. 반면 disabled는 요소 자체가 비활성화되어 포커스도 받을 수 없고, 폼 제출 시 값도 전송되지 않습니다.
구문(Syntex)
다음은 readOnly 속성의 기본 구문입니다.
1. readOnly 값 가져오기
object.readOnly
2. readOnly 값 설정하기
object.readOnly = true | false
반환값은 불리언(Boolean) 타입으로, 읽기 전용 상태이면 true, 그렇지 않으면 false입니다.
예제
다음 예제는 버튼을 클릭할 때마다 textarea 요소의 readOnly 속성 값을 전환(toggle)하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightseagreen;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
<body>
<h1>DOM Textarea readOnly Property Demo</h1>
<textarea rows="5" cols='20' name="I'm name attribute of textarea element">
Hi! I'm a text area element with some dummy text.
</textarea>
<button onclick="set()" class="btn">Toggle Read Only</button>
<script>
function set() {
var ta = document.querySelector("textarea");
if (ta.readOnly === true) {
ta.readOnly = false;
} else {
ta.readOnly = true;
}
}
</script>
</body>
</html>실행 결과
위 화면에서 “Toggle Read Only” 버튼을 클릭하면 textarea 요소의 readOnly 속성 값이 true에서 false로, 또는 false에서 true로 전환됩니다.
읽기 전용 상태에서는 텍스트 영역의 내용을 선택하거나 복사할 수는 있지만, 키보드로 새로운 내용을 입력하거나 기존 내용을 수정할 수 없습니다. 버튼을 다시 클릭하면 편집 가능한 상태로 되돌아갑니다.