화면을 개발하다보면, 누구나 한 번 쯤은 겪게 될 상황.
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 에서 새로 지원하는 타입이다. 고로 브라우저 지원여부는 확인하고 사용하자.
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] Object 객체에 .forEach() 가 안먹을 때 (0) | 2020.05.14 |
|---|---|
| [JavaScript] 헷갈리지 말자! for loop 유형 (in, of) (0) | 2020.03.12 |
| [JavaScript] Chart.js 로 파이차트 만들 때 backgroundColor 핸들링하는 방법 (0) | 2019.07.23 |
| KB927917 오류 해결 및 자바스크립트에서 Map 온전히 사용하기 (0) | 2019.06.14 |
| 자바스크립트에서 IE버전 확인하는 방법 (0) | 2019.06.12 |
댓글