HTML DOM input month stepDown() 메서드 – 월 입력 필드 값 감소 방법

HTML DOM의 stepDown() 메서드는 <input type="month">로 생성된 월(month) 입력 필드의 값을 지정한 숫자만큼 감소(차감)하는 기능을 수행합니다. 반대로 값을 증가시키고 싶다면 stepUp() 메서드를 사용하면 됩니다.

문법(Syntax)

stepDown() 메서드의 기본 문법은 다음과 같습니다.

object.stepDown(number)

여기서 number 매개변수는 생략이 가능합니다. 매개변수를 지정하지 않으면 기본값으로 1씩 감소합니다. 예를 들어 3을 전달하면 현재 값에서 3개월만큼 줄어듭니다.

예제 코드

아래 예제를 통해 input month 필드에서 stepUp()/stepDown() 메서드를 실제로 어떻게 활용하는지 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM stepUp()/stepDown() Demo</title>
<style>

   body{
      text-align:center;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100vh;
      color:#fff;
   }

   p{
      font-size:1.5rem;
   }

   input{
      width:40%;
   }

   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:1rem;
      border-radius:50px;
      outline:none;
      cursor:pointer;
   }

</style>
</head>
<body>
<h1>stepUp()/stepDown() Method Demo</h1>
<p>안녕하세요! 태어난 달을 선택해 주세요.</p>
<input type="month">
<br>
<button onclick="incValue()">StepUp Value</button>
<button onclick="decValue()">StepDown Value</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp();
   }
   function decValue() {
      document.querySelector("input").stepDown();
   }
</script>
</body>
</html>

실행 결과

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

HTML DOM input month stepDown() 메서드 – 월 입력 필드 값 감소 방법

화면에 표시된 “StepUp Value” 또는 “StepDown Value” 버튼을 클릭하면, 월 입력 필드의 값이 각각 한 달씩 증가하거나 감소합니다.

HTML DOM input month stepDown() 메서드 – 월 입력 필드 값 감소 방법

참고 사항

stepDown()은 <input type="month">뿐만 아니라 number, date, time 등 스텝(step) 속성을 지원하는 입력 유형에서도 동작합니다.
입력 필드에 값이 설정되어 있지 않으면 브라우저에 따라 메서드가 아무 효과 없거나 기본값 기준으로 동작할 수 있으므로, 필요하다면 초기값을 먼저 지정해 주는 것이 좋습니다.