HTML DOM Input Number step 속성 – 값 가져오기와 설정하기

HTML DOM의 input number step 속성은 HTML 문서 내 숫자 입력 필드(<input type="number">)에 적용된 step 속성의 값을 반환하거나 수정하는 데 사용됩니다. step 속성은 숫자 입력 필드에서 값이 증가하거나 감소할 때의 간격(단계 크기)을 결정하며, 사용자가 화살표 키나 스피너 버튼으로 값을 조정할 때 그 폭을 제어합니다.

문법(Syntax)

다음은 step 속성의 기본 문법입니다.

step 값 반환하기

object.step

step 값 설정하기

object.step = "number"

예제

HTML DOM input number step 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

<!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;
    }
    .show{
        font-size:1.5rem;
        color:#db133a;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input number step property Demo</h1>
<p>Hi, Enter any number & then try to increment/decrement its value</p>
<input type="number" class="numberInput">
<button type="button" onclick="setStep()" class="btn">Set step to 5</button>
<button type="button" onclick="getStep()" class="btn">Click me to show step value</button>
<div class="show"></div>
<script>
    function setStep(){
        var numberInput = document.querySelector(".numberInput");
        numberInput.step="5";
    }
    function getStep() {
        var numberInput = document.querySelector(".numberInput");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML = numberInput.step;
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Input Number step 속성 – 값 가져오기와 설정하기

숫자 입력 필드에 원하는 값을 입력한 뒤, “Set step to 5” 버튼을 클릭하여 step 값을 5로 설정합니다.

HTML DOM Input Number step 속성 – 값 가져오기와 설정하기

이제 위쪽(up) 및 아래쪽(down) 화살표 키를 눌러 값을 증가 또는 감소시켜 보세요. 기본값인 1씩이 아니라 5씩 값이 변하는 것을 확인할 수 있습니다.

HTML DOM Input Number step 속성 – 값 가져오기와 설정하기

마지막으로 “Click me to show step value” 버튼을 클릭하면 현재 설정된 step 값이 화면에 표시됩니다.

HTML DOM Input Number step 속성 – 값 가져오기와 설정하기

참고 사항

step 속성의 기본값은 1입니다.
step 값으로 “any”를 지정하면 증감 간격 제한 없이 임의의 소수점 값도 입력할 수 있습니다.
step 속성은 min, max 속성과 함께 사용하면 입력 가능한 값의 유효 범위와 간격을 함께 제어할 수 있어 폼 유효성 검사에 유용합니다.