HTML DOM Input Month readOnly 속성 – 개념부터 실전 예제까지

HTML DOM의 input month readOnly 속성은 HTML 문서에서 월(month) 입력 필드가 읽기 전용 상태인지를 확인하거나 변경할 때 사용되는 속성입니다. 이 속성을 활용하면 사용자가 특정 필드의 값을 수정하지 못하도록 제어할 수 있습니다.

문법(Syntax)

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

1. readOnly 값 가져오기

object.readOnly

2. readOnly 값 설정하기

object.readOnly = true | false

true로 설정하면 해당 입력 필드는 읽기 전용이 되어 값을 수정할 수 없고, false로 설정하면 다시 편집이 가능해집니다.

예제(Example)

아래 예제는 HTML DOM input month readOnly 속성을 실제로 활용한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.1rem;
   }
   input{
      display:block;
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
      margin:1rem auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input month readOnly 속성 데모</h1>
<p>안녕하세요! 태어난 월을 선택해 주세요.</p>
<input type="month" class="monthInput">
<button onclick="rFunction()" class="btn">읽기 전용(Read Only)</button>
<button onclick="rWFunction()" class="btn">읽기/쓰기(Read & Write)</button>
<script>
   function rFunction() {
      var monthInput = document.querySelector(".monthInput");
      monthInput.readOnly =true;
   }
   function rWFunction(){
      var monthInput = document.querySelector(".monthInput");
      monthInput.readOnly =false;
   }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input Month readOnly 속성 – 개념부터 실전 예제까지

먼저 월 입력 필드에서 원하는 월을 선택한 뒤, [읽기 전용(Read Only)] 버튼을 클릭해 보세요. 그 후 선택값을 변경하려고 시도하면 더 이상 수정할 수 없습니다.

HTML DOM Input Month readOnly 속성 – 개념부터 실전 예제까지

이번에는 [읽기/쓰기(Read & Write)] 버튼을 클릭한 뒤 선택값을 변경해 보세요. 이번에는 정상적으로 값을 수정할 수 있습니다.

HTML DOM Input Month readOnly 속성 – 개념부터 실전 예제까지

정리

readOnly 속성은 폼 데이터를 조회용으로만 표시해야 하거나, 특정 조건에서 사용자의 입력을 잠그고 싶을 때 유용하게 활용됩니다. JavaScript와 함께 사용하면 버튼 클릭 등의 이벤트에 따라 입력 필드의 편집 가능 여부를 동적으로 제어할 수 있다는 점을 기억하세요.