input type text 숫자만 입력 정규식

Front-end/HTML

mooyou 2022. 1. 3. 15:30

728x90

SMALL

input영역에 숫자만 입력 받는 방법은

<input type ='number'></input>

이렇게 input type을 number로 지정해 주면 되는 일이지만

input에 up down 버튼이 생겨버린다.

그래서 input type="text"로 하면서 숫자만 입력 받기 위해서는 oninput 이벤트와 정규식을 사용해서 가능하다.

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

oninput 이벤트는 input 값이 바뀌면 발생하는 이벤트 이며 이 이벤트가 발생할 때 숫자만 입력받는 정규식이 적용되고 숫자가 아닌 값이 입력되면 replace 함수로 대체하게 된다.

참고사이트

728x90

LIST