HTML DOM Input Week readOnly 속성 완벽 정리

HTML DOM의 Input Week readOnly 속성은 주(week) 유형 입력 필드가 사용자에 의해 수정 가능한지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성을 활용하면 특정 조건에서 입력 필드를 읽기 전용으로 전환하여 사용자가 값을 변경하지 못하도록 제어할 수 있습니다.

구문(Syntax)

readOnly 속성의 기본 문법은 다음과 같습니다.

1. 현재 값 반환하기

불리언 값(true/false)을 반환합니다.

inputWeekObject.readOnly

2. readOnly 값 설정하기

booleanValue에 true 또는 false를 지정하여 설정합니다.

inputWeekObject.readOnly = booleanValue

불리언(Boolean) 값 종류

booleanValue에 사용할 수 있는 값과 그 의미는 다음과 같습니다.

booleanValue	설명
true	입력 필드가 읽기 전용(readOnly) 상태가 되어 수정할 수 없습니다.
false	입력 필드가 읽기 전용이 아니며, 사용자가 자유롭게 수정할 수 있습니다.

예제 코드

다음은 Input Week readOnly 속성을 실제로 활용한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Week readOnly</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Week-readOnly</legend>
<label for="WeekSelect">시험 주차 선택:
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="confirmWeek()" value="주차 확정">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    divDisplay.textContent = '주차 확정 여부: '+inputWeek.readOnly;
    function confirmWeek() {
        inputWeek.readOnly = true;
        divDisplay.textContent = '주차 확정 여부: '+inputWeek.readOnly;
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 동작을 확인할 수 있습니다.

'주차 확정' 버튼을 클릭하기 전에는 readOnly 값이 false로 표시되어 입력 필드를 자유롭게 수정할 수 있습니다.

HTML DOM Input Week readOnly 속성 완벽 정리

'주차 확정' 버튼을 클릭한 후에는 readOnly 값이 true로 변경되고, 해당 주(week) 입력 필드는 더 이상 수정할 수 없게 됩니다.

HTML DOM Input Week readOnly 속성 완벽 정리

참고 사항

readOnly 속성은 disabled 속성과 달리 읽기 전용이어도 폼 제출 시 값이 함께 전송된다는 점에서 차이가 있습니다. 따라서 사용자에게 값을 보여주되 수정은 막고 싶은 경우 readOnly가 적합한 선택입니다.