HTML DOM Input Date readOnly 속성이란?
HTML DOM의 readOnly 속성은 날짜 입력 필드(<input type="date">)를 사용자가 수정할 수 있는지 여부를 설정하거나 현재 상태를 반환하는 속성입니다. 이 속성을 활용하면 특정 조건에서 날짜 선택을 잠그거나, 이미 확정된 값을 보호할 수 있습니다.
readOnly가 적용된 날짜 필드는 화면에는 그대로 표시되지만 사용자가 직접 값을 변경할 수 없다는 점이 특징입니다.
문법(Syntax)
readOnly 속성의 기본 문법은 다음과 같습니다.
- 값 읽기(반환) – 현재 상태를 불리언 값(true/false)으로 반환합니다.
inputDateObject.readOnly
- 값 설정 – readOnly 속성에 불리언 값을 할당합니다.
inputDateObject.readOnly = booleanValue
booleanValue 값의 종류
설정할 수 있는 값은 다음 두 가지입니다.
| booleanValue | 설명 |
|---|---|
| true | 날짜 입력 필드가 읽기 전용(readOnly) 상태가 되어 수정할 수 없습니다. |
| false | 날짜 입력 필드가 읽기 전용 상태가 아니며, 사용자가 자유롭게 수정할 수 있습니다. |
예제 코드
다음은 Input Date readOnly 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 시험 날짜가 확정되고, 해당 날짜 입력 필드는 더 이상 수정할 수 없게 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date readOnly</title>
</head>
<body>
<form>
기말고사 날짜: <input type="date" id="dateSelect">
</form>
<button onclick="finalizeDate()">날짜 확정</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
divDisplay.textContent = '시험 날짜 확정 여부: '+inputDate.readOnly;
function finalizeDate() {
inputDate.readOnly = true;
divDisplay.textContent = '확정된 시험 날짜: '+inputDate.value;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'날짜 확정' 버튼을 클릭하기 전 – readOnly 값이 false로 표시되며 날짜를 자유롭게 변경할 수 있습니다.
'날짜 확정' 버튼을 클릭한 후 – readOnly가 true로 설정되어 날짜 입력 필드가 잠기고, 확정된 날짜가 화면에 출력됩니다.
정리
readOnly 속성은 단순히 true 또는 false 한 줄만으로 날짜 입력 필드의 수정 가능 여부를 제어할 수 있는 간편한 기능입니다. 폼 데이터 무결성을 유지하거나, 사용자가 이미 제출한 정보를 보호해야 하는 상황에서 유용하게 활용할 수 있습니다.