HTML DOM의 입력 숫자(input number) 객체는 HTML 문서에서 <input type="number"> 요소를 자바스크립트로 다룰 수 있게 해주는 객체입니다. 이 객체를 활용하면 숫자 입력 필드를 동적으로 생성하고, 값이나 다양한 속성을 읽고 수정할 수 있습니다.
입력 숫자 객체 생성 방법
자바스크립트로 숫자 입력 필드를 만들려면 createElement() 메서드를 사용한 뒤, 타입을 "number"로 지정하면 됩니다.
문법(Syntax)
var numberInput = document.createElement("INPUT");
numberInput.setAttribute("type", "number");주요 속성(Properties)
입력 숫자 객체에서 사용할 수 있는 대표적인 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | 숫자 입력 필드의 autocomplete(자동 완성) 속성 값을 반환하거나 변경합니다. |
| autofocus | 페이지가 로드될 때 해당 입력 필드에 자동으로 포커스가 설정되는지 여부를 반환하거나 지정합니다. |
| disabled | 입력 필드가 비활성화되어 있는지 여부를 반환하거나 설정합니다. |
| defaultValue | 입력 필드의 기본값(default value)을 반환하거나 변경합니다. |
| form | 해당 입력 필드가 포함된 폼(form) 요소의 참조를 반환합니다. |
| list | 입력 필드와 연결된 datalist 요소의 참조를 반환합니다. |
| max | 입력 가능한 최댓값(max 속성)을 반환하거나 변경합니다. |
| min | 입력 가능한 최솟값(min 속성)을 반환하거나 변경합니다. |
| name | 입력 필드의 name 속성 값을 반환하거나 변경합니다. |
| readOnly | 입력 필드가 읽기 전용인지 여부를 반환하거나 설정합니다. |
| required | 폼 제출 전에 해당 필드의 입력이 필수인지 여부를 반환하거나 설정합니다. |
| step | 값이 증감되는 단위(step 속성)를 반환하거나 변경합니다. |
| type | 입력 필드의 type 속성 값을 반환합니다. 항상 "number"입니다. |
| value | 입력 필드의 현재 값(value)을 반환하거나 변경합니다. |
| placeholder | 입력 전 안내 문구로 표시되는 placeholder 속성 값을 반환하거나 변경합니다. |
주요 메서드(Methods)
입력 숫자 객체는 값을 단계적으로 조작할 수 있는 두 가지 메서드를 제공합니다.
| 메서드 | 설명 |
|---|---|
| stepUp() | 매개변수로 지정한 값만큼 입력 필드의 값을 증가시킵니다. |
| stepDown() | 매개변수로 지정한 값만큼 입력 필드의 값을 감소시킵니다. |
예제 코드
다음은 버튼을 클릭하면 숫자 입력 필드를 동적으로 생성하고, 그 속성 값을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<style>
body{
text-align:center;
background-color:#363946;
color:#fff;
}
button{
background-color:#db133a;
border:none;
cursor:pointer;
padding:8px 16px;
color:#fff;
border-radius:5px;
font-size:1.05rem;
outline:none;
}
.show{
font-weight:bold;
font-size:1.4rem;
}
</style>
<body>
<h1>Input Number Object Demo</h1>
<p>아래 버튼을 클릭하면 숫자 입력 필드가 생성됩니다.</p>
<button onclick="createNumber()">Create an input number field</button>
<p class="show"></p>
<script>
function createNumber() {
var numberInput = document.createElement("INPUT");
numberInput.setAttribute("type", "number");
numberInput.setAttribute("value", "10");
numberInput.setAttribute("min", "0");
numberInput.setAttribute("max", "100");
document.body.appendChild(numberInput);
document.querySelector(".show").innerHTML
= "type = " + numberInput.type
+ ", value = " + numberInput.value;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
“Create an input number field” 버튼을 클릭하면 새로운 숫자 입력 필드가 생성되고, 해당 필드의 type과 value 값이 아래에 표시됩니다.
정리
HTML DOM 입력 숫자 객체는 <input type="number"> 요소를 완전하게 제어할 수 있는 강력한 인터페이스입니다. min, max, step 같은 속성으로 입력 범위를 관리하고, stepUp()/stepDown() 메서드로 값을 손쉽게 증감시킬 수 있으므로, 수량 선택이나 점수 입력처럼 숫자 기반의 폼 UI를 개발할 때 매우 유용하게 활용할 수 있습니다.