[HTML] input태그 숫자만 입력 가능하도록 설정하기(oninput)

input 태그를 사용하다 보면 숫자만 입력되게 하고 싶은 경우가 있다.

javascript로 처리할 수 있지만 입력하는 순간 숫자 외에 다른 문자들을 공백으로 처리하기 때문에 입력하는 순간 값들이 보인다.

input태그에 oninput속성을 활용하면 숫자 외에 입력되는 문자들을 입력되는 순간 조차도 안보이게 할 수 있다.

 

<input type="text" id="estPrice" class="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="숫자만 입력 가능합니다."/>

this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');

 

정규식을 이용하여 숫자외에 다른 문자들을 replace() 함수를 통해 치환한다.

 

※placeholder를 사용하여 백그라운드에 숫자만 입력 가능하다는 문구를 넣어 주는 것이 좋다.