Frontend/JavaScript
input 태그에 숫자만 입력가능하도록 설정하기
지구
2019. 7. 26. 13:40
화면을 개발하다보면, 누구나 한 번 쯤은 겪게 될 상황.
input 태그에 숫자만 입력가능하도록 하는 것.
아마 일부분의 사람들은 input 타입을 text 로 설정한 뒤 onKeyup 이나 onKeyPress 등으로 이벤트를 잡아 숫자로 치환하는 방식을 쓸 것이다.
<HTML>
1 | <input type="text" .... onKeyup="myUtils.onlyNumber(this);"> | cs |
하지만, 이 방법보다 더 좋은 방법이 있다.
input type 을 "text" 로 하면 일반 키패드가 뜨니 HTML5 에서 새로 추가된 "number" 를 사용하면 숫자키패드가 노출된다는 것.
(이것만 바꾼다고 해서 다 되는 것은 아니다, AOS 에서는 숫자키패드가 뜰지언정 IOS 에서는 일반키패드가 뜬다 ㅎ)
그 뒤로 또 중요한 pattern 속성을 추가해주면 된다.
사용법은 pattern="\d*" 이고, pattern 안에는 정규식으로 채워줘야한다.
여기서 d 는 digit 즉, 숫자를 뜻하므로 숫자만 입력가능하게끔 처리해준다는 뜻이다 :)
결국 아래와 같은 태그로 변경하게 되면,
IOS/AOS 기기에서 숫자키패드 노출과 숫자만 입력가능하게끔 더 깔끔하게! 할 수 있다는 것이다.
1 | <input type="number" ... pattern="\d*"> | cs |
이 게시물은 내가 진행하며 애먹었던 부분을 해결하여 뿌듯한 마음에 포스팅한다 ㅎㅎ 많은 나그네분들에게 도움이 되었으면 좋겠다. 끝
+ 추가)
number 타입은 HTML5 에서 새로 지원하는 타입이다. 고로 브라우저 지원여부는 확인하고 사용하자.
반응형