Input tag, number type, 입력창에 소수점 입력 허용 방법(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입력창에 소수점 숫자를 입력하게 할 수 있는 것이다.