HTML DOM input month stepUp() 메서드 – 월 입력 필드 값 증가시키기

HTML DOM의 input month stepUp() 메서드는 월(month) 유형 입력 필드의 값을 지정한 크기만큼 증가시키는 역할을 합니다. 반대로 값을 감소시켜야 할 때는 stepDown() 메서드를 함께 사용할 수 있습니다.

문법

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

object.stepUp(number)

number 매개변수는 한 번에 얼마나 값을 증가시킬지 결정합니다. 이 매개변수를 생략하면 기본값인 1만큼 값이 증가합니다.

예제

다음은 stepUp() 메서드와 stepDown() 메서드를 함께 활용한 실전 예제입니다. 버튼을 클릭하면 월 입력 필드의 값이 증가하거나 감소합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM stepUp()/stepDown() 데모</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() 메서드 데모</h1>
<p>안녕하세요! 태어난 월을 선택해 보세요</p>
<input type="month">
<br>
<button onclick="incValue()">값 증가 (StepUp)</button>
<button onclick="decValue()">값 감소 (StepDown)</button>
<script>
   function incValue() {
      document.querySelector("input").stepUp();
   }
   function decValue() {
      document.querySelector("input").stepDown();
   }
</script>
</body>
</html>

실행 결과

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

HTML DOM input month stepUp() 메서드 – 월 입력 필드 값 증가시키기

"값 증가 (StepUp)" 또는 "값 감소 (StepDown)" 버튼을 클릭하면 월 입력 필드의 값이 각각 한 달씩 증가하거나 감소합니다.

HTML DOM input month stepUp() 메서드 – 월 입력 필드 값 증가시키기

참고 사항

입력 필드가 비어 있는 상태에서 stepUp()을 호출하면 브라우저에 따라 현재 월이 자동으로 설정된 후 증가합니다.
필드에 min, max, step 속성이 지정되어 있으면 해당 범위와 단계 안에서만 값이 변경됩니다.
이 메서드는 Chrome, Edge, Opera 등 대부분의 최신 브라우저에서 정상적으로 동작합니다.