input 태그에서 최소값 min 최대값 max 설정하기 / text에서 숫자만 받기 number only

- input 태그 type을 number로 설정하기 -

사용자로부터 정보를 입력받을 때는
input 태그를 사용한다.

이때 숫자 자료형으로 입력받고 싶다면
type을 number로 설정해주면 된다.

<input type="number" id="orderCnt" value="1" /> //숫자만 입력받기 (기본값1)

숫자를 입력 받을 때,
어떤 숫자 이상만 입력 가능하거나
어떤 숫자 이하만 입력 가능하도록
제한을 걸어 두어야 할 때도 있다.
그럴 때는 최대값이나 최소값을 설정해주면 된다.

<input type="number" id="orderCnt" min="1" max="10" value="1" /> //최소 1, 최대 10 사이에서 입력 받기

최대값이나 최소값 제한이 적용되는 것은
마우스로 값을 조정할 때뿐이다.
키보드로 입력할 때는 인식하지 못한다.
따라서 키보드로 입력하는 값은
따로 이벤트 설정을 해두어야 한다.

- type은 text로 하고 이벤트로 제한하기 -

숫자만 입력받는 또 다른 방법이 있다.
input 태그에서 type은 text로 설정해 두고,
입력받을 때 이벤트를 걸어서 값을 제한하는 방법이다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

 

> 참고 자료
https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input

- 220413