HTML | Input 숫자만 입력되게 하는 방법 (Feat. type="text")

html input number only

숫자만 입력 되도록 하는 방법

input태그의 type(타입) 속성을 number로 해주면 숫자만 입력이 가능하다. 그런데 이 경우에는 음수와 입력창 옆 화살표 아이콘이 생기는 등 딱 원했던 기능이 아닐 수 있다.

input with type number

이 문제를 해결 하기 위해 type 속성을 text로 두고 해결해 보려 한다.

type="text"

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

위의 oninput 속성을 추가하면 숫자 이외의 모든 입력값은 지워준다. 따라서 숫자만 입력 가능한 입력창이 구현 되는 것이다.