[HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용)

 

아래와 같이 number 타입의 input 입력창을 생성하면,

<input type=number>

 

아래처럼 소수점 입력이 안 된다...

 

 

자바스크립트 없이 해결하는 방법이 있다.

즉, INPUT 엘리먼트의 속성 조정만으로 "소수점 입력"을 가능하게 할 수 있다.

 

# INPUT:number 태그에 소수점 숫자 입력 방법 => step 속성 설정

1. 소수점 1자리까지 입력 설정:  input태그에 step="0.1" 속성 추가 

<input type="number" step="0.1">

 

2. 소수점 2자리까지 입력 설정:  input태그에 step="0.01" 속성 추가 

<input type="number" step="0.01">

 

이렇게하면 소수점 숫자도 입력이 가능해진다.

(물론 number 타입이므로, 숫자외의 문자 등은 입력이 불가하다)

 

# step 속성이란?

: step속성은 input 입력창의 숫자 간격을 설정하는 속성이다.

: number 타입의 input창은 위아래 화살표로 입력숫자값을 변경할 수 있는데, 이 간격을 0.01 등으로 조정하는 속성이다.

 

: 따라서 step=3 을 설정하면, -3, 0, 6, 9, ... 간격의 숫자만 입력할 수 있다.(아래처럼 2는 입력이 안 된다)

 

이 속성을 활용하여 간격을 0.1이나 0.01을 설정함으로써,

number타입 input입력창에 소수점 숫자를 입력하게 할 수 있는 것이다.

 

도움이 되시길.