HTML DOM의 Input Time stepUp() 메서드는 <input type="time"> 요소로 만든 시간 입력 필드의 값을 지정한 분(minute) 단위만큼 증가시킵니다. 이 메서드를 활용하면 사용자가 시계 UI를 일일이 조작하지 않고도 버튼 클릭 한 번으로 시간 값을 손쉽게 변경할 수 있습니다.
구문(Syntax)
stepUp() 메서드의 기본 구문은 다음과 같습니다.
inputTimeObject.stepUp(number)
매개변수 number에는 시간 필드를 얼마나 증가시킬지 분 단위의 숫자를 전달합니다. 이 값은 선택 사항이며, 생략하면 기본값인 1이 적용됩니다.
예제
다음은 Input Time stepUp() 메서드의 동작을 보여주는 예제입니다. 초기값이 12:52로 설정된 시간 필드에 대해, 버튼을 클릭하면 각각 10분 또는 25분씩 값이 증가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Time stepUp()</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>Time-stepUp( )</legend>
<label for="TimeSelect">Clock :
<input type="time" id="TimeSelect" value="12:52">
</label>
<input type="button" onclick="changeStep(10)" value="Increase by 10">
<input type="button" onclick="changeStep(25)" value="Increase by 25">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function changeStep(myStepUp) {
inputTime.stepUp(myStepUp);
divDisplay.textContent = 'Current Step: '+myStepUp;
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
버튼을 클릭하기 전 −
'Increase by 10' 버튼 클릭 시 − 시간 값이 12:52에서 13:02로 10분 증가합니다.
'Increase by 25' 버튼 클릭 시 − 시간 값이 12:52에서 13:17로 25분 증가합니다.
함께 알아두면 좋은 내용
- 값을 감소시키고 싶다면 stepUp()과 짝을 이루는 stepDown() 메서드를 사용하면 됩니다.
- 실제 증가 단위는 해당 input 요소의 step 속성 설정에 영향을 받을 수 있습니다.
- stepUp()은 Chrome, Edge, Firefox, Opera 등 주요 브라우저에서 지원되지만, 일부 브라우저나 모바일 환경에서는 시간 입력 방식이 다르게 동작할 수 있으므로 크로스 브라우저 테스트를 권장합니다.