HTML DOM 비밀번호 입력 필드 readOnly 속성 완벽 정리

HTML DOM에서 Input Password의 readOnly 속성은 비밀번호 입력 필드가 읽기 전용(read-only) 상태인지 여부를 설정하거나 반환하는 데 사용됩니다.

readOnly 속성을 적용하면 해당 요소는 더 이상 편집할 수 없지만, 탭(Tab) 키나 마우스 클릭을 통한 포커스는 여전히 가능합니다. 또한 읽기 전용 요소에 기본값이 포함되어 있는 경우, 폼 제출 시 해당 값은 서버로 정상적으로 전송됩니다. 이 점이 disabled 속성과의 중요한 차이점입니다.

문법(Syntax)

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

passwordObject.readOnly = true|false

true: 비밀번호 필드가 읽기 전용 상태가 됩니다.
false: 비밀번호 필드를 편집할 수 있습니다(기본값).

readOnly 속성의 기본값은 false로 설정되어 있습니다.

예제 코드

다음은 비밀번호 입력 필드의 readOnly 속성을 활용한 실제 예제입니다.

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

실행 결과

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

HTML DOM 비밀번호 입력 필드 readOnly 속성 완벽 정리

CHANGE 버튼을 클릭한 후, 비밀번호 입력 상자에 더 이상 텍스트를 입력할 수 없게 됩니다.

HTML DOM 비밀번호 입력 필드 readOnly 속성 완벽 정리

코드 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 비밀번호 입력 필드 생성

먼저 id가 "PASS1"인 비밀번호 입력 필드를 생성했습니다.

Password: <input type="password" id="PASS1">

2. CHANGE 버튼 생성

사용자가 클릭하면 changeRead() 메서드를 실행하는 버튼을 만들었습니다.

<button onclick="changeRead()">CHANGE</button>

3. changeRead() 함수 구현

changeRead() 함수는 getElementById() 메서드를 사용하여 type이 password인 입력 요소를 가져온 뒤, 해당 요소의 readOnly 속성을 true로 설정합니다.

function changeRead() {
    document.getElementById("PASS1").readOnly = true;
}

이렇게 하면 비밀번호 필드에 텍스트를 입력할 수는 없지만, 요소 자체는 여전히 포커스를 받을 수 있습니다. 또한 제출(submit) 버튼을 클릭하면 필드 안의 값이 서버로 전송됩니다.

readOnly와 disabled의 차이점

두 속성 모두 입력을 막지만 동작 방식에 차이가 있습니다.

readOnly: 편집은 불가능하지만 포커스를 받을 수 있고, 폼 제출 시 값이 서버로 전송됩니다.
disabled: 편집과 포커스가 모두 불가능하며, 폼 제출 시 값도 전송되지 않습니다.

따라서 사용자에게 값을 보여주면서 수정은 막고 싶을 때 readOnly 속성을 활용하는 것이 좋습니다.