HTML DOM의 Input Text readOnly 속성은 텍스트 입력 필드가 읽기 전용(read-only) 상태인지 여부를 설정하거나 반환하는 데 사용됩니다. readOnly 속성이 적용된 요소는 사용자가 편집할 수 없지만, 탭 키나 마우스 클릭을 통해서는 여전히 포커스를 받을 수 있습니다. 또한 읽기 전용 요소에 기본값(default value)이 들어 있다면, 폼 제출 시 해당 값은 서버로 전송됩니다.
문법(Syntax)
readOnly 속성을 설정하는 문법은 다음과 같습니다.
textObject.readOnly = true|false
여기서 true는 해당 텍스트 필드가 읽기 전용임을 의미하며, false는 편집 가능한 상태임을 의미합니다. readOnly 속성의 기본값은 false로 설정되어 있습니다.
예제(Example)
다음은 Input Text readOnly 속성을 활용한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Text readOnly property</h1>
USERNAME: <input type="text" id="USR" >
<p>아래 버튼을 클릭하여 위 필드의 readOnly 속성을 변경해 보세요</p>
<button onclick="changeRead()">CHANGE</button>
<script>
function changeRead() {
document.getElementById("USR").readOnly = true;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭하면 해당 텍스트 필드는 더 이상 편집할 수 없게 되며, 폼 제출 시 입력된 값이 서버로 전송됩니다.
readOnly와 disabled의 차이점
읽기 전용 필드를 구현할 때 자주 혼동되는 개념으로 disabled 속성이 있습니다. 두 속성의 주요 차이는 다음과 같습니다.
- readOnly: 사용자가 값을 수정할 수 없지만 포커스를 받을 수 있고, 폼 제출 시 값이 서버로 전송됩니다.
- disabled: 사용자가 값을 수정할 수 없고 포커스도 받을 수 없으며, 폼 제출 시 값이 서버로 전송되지 않습니다.
따라서 기존 데이터를 사용자에게 보여주면서 수정은 막고 싶지만, 해당 값을 서버에 그대로 전달해야 하는 경우에는 readOnly 속성을 사용하는 것이 적합합니다.