HTML - input 속성 태그 모바일 환경에서 숫자패드 먼저 나오게 하기

HTML 페이지에서 반응형 작업을 한 후 모바일에서 테스트를 하는도중 input text속성 태그를 모바일환경에서

선택하게 되면 키 자판이 일반 입력 배열이 아닌 숫자자판이 나오게 하고 싶었다.

​

이러한 경우엔 type 값을 tel 속성으로 지정해주면 모바일환경에서 숫자자판이 먼저 나오는 걸 볼 수 있다.

 

<input type="tel" value="">

 

https://www.w3schools.com/tags/att_input_type_tel.asp

HTML input type="tel"

 

같이 사용할만한 자바스크립트 입력제한 방법이다.

​

html

<input type="tel" value="" telOnly="true">

 

javascript

//input tel telOnly 속성이 있으면 숫자, '-'만 입력받기
$(document).on("keyup", "input[telOnly]", function() {$(this).val( $(this).val().replace(/[^0-9-]/gi,"") );});

 

자바스크립트 keyup 이벤트를 통해 입력된 데이터를 replace 함수를 통해 변경한다.

해당 자바스크립트를 설정하면 숫자 및 '-'만 입력이 가능하다.