HTML DOM Input Search readOnly 속성 완벽 정리

HTML DOM의 Input Search readOnly 속성은 검색 입력 필드(<input type="search">)가 읽기 전용 상태인지 여부를 설정하거나 반환하는 데 사용됩니다.

readOnly 속성이 true로 설정되면 해당 요소는 사용자가 편집할 수 없게 되지만, Tab 키나 마우스 클릭을 통한 포커스는 여전히 가능합니다. 또한 읽기 전용 요소에 기본값이 존재할 경우, 폼 제출 시 해당 값이 서버로 함께 전송된다는 점에서 disabled 속성과 차이가 있습니다.

문법(Syntax)

readOnly 속성을 설정하는 문법은 다음과 같습니다.

searchObject.readOnly = true|false

여기서 true는 검색 필드가 읽기 전용임을 의미하고, false는 편집 가능한 상태임을 의미합니다. readOnly 속성의 기본값은 false입니다.

예제(Example)

다음은 Search readOnly 속성을 활용한 예제 코드입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Search readOnly property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>아래 버튼을 클릭하여 위 필드의 readOnly 속성을 변경해 보세요.</p>
<button onclick="changeRead()">CHANGE</button>
<script>
    function changeRead() {
        document.getElementById("SEARCH1").readOnly = true;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Search readOnly 속성 완벽 정리

CHANGE 버튼을 클릭하면 검색 필드가 읽기 전용 상태로 전환되어 더 이상 내용을 수정할 수 없게 됩니다.

HTML DOM Input Search readOnly 속성 완벽 정리

정리

readOnly 속성은 사용자에게 값을 보여주되 수정은 허용하지 않아야 하는 경우에 유용하게 활용됩니다. 특히 disabled와 달리 폼 제출 시 값이 서버로 전달되므로, 데이터 무결성을 유지하면서 화면 표시만 제어하고 싶을 때 적합한 선택입니다.