[HTML] 모바일 페이지 - 휴대폰에서 숫자 키패드로 입력 받기

웹 모바일 페이지를 작업하다가

연락처 기입하는 칸에  숫자 키패드가 바로 나오게 해달라는 요청이 있었다. 

 

일단 기본적으로 

<input type="number" name="tel" id="tel" value="" maxlength="11" />

이렇게 input 타입을 number 로 주면 

안드로이드 폰에서는 숫자 키패드가 뜨는데 아이폰에서는 뜨지 않는다.

 

<input type="number" name="tel" id="tel" value="" maxlength="11"  pattern="\d*/>

 

그래서 이렇게 뒤에  pattern="\d*"  를 붙여주면 아이폰에서도 숫자 키패드가 바로 뜬다.

 

근데 문제는 

내가 이미 

input type ="text" 로 autoHypen() 함수를 먹였을 때 이 요청을 받았기 때문에 

number로 바꾸면  전화번호 중간에  010-****-**** 이렇게 자동으로 중간에 하이픈이 들어가는 함수가 

먹지 않았다.. 

 

그래서 곰곰히 생각하다 

input type을 tel (전화번호)로 바꾸어주니 아주 잘 먹었다! 

 

<input type="tel" name="htel" id="htel" oninput="autoHyphen(this)" maxlength="13" pattern="\d*">

 

함수 수정안 하고 

요청사항 수정 완료!