[HTML] 모바일에서 input 태크 숫자 키패드 불러오기.

<input type="number" max="5" maxlength="4" oninput="maxLengthCheck(this)">

모바일에서 input 태그 폼영역을 터치하면 

Android 나 IOS 에서 내용을 작성할 수 있는 키패드가 나옵니다.

이 부분을 글자를 적는 키패드가 아닌 숫자만 적을 수 있는 숫자 키패드만 나오게하는 방법이 있습니다.

 

input 태그 작성 시 다음과 같이 작성하면 됩니다.

<input type="number">

하지만 다음과 같은 방법은 치명적인 오류가 있습니다.

 

Android에서는 숫자 키패드가 나오지만 IOS 에서는 키패드가 나오지 않습니다.

IOS 에서도 똑같이 숫자 키패드가 나오게 하기위해선 다음과 같은 속성을 추가해 줍니다.

<input type="number" pattern="\d*" placeholder="number">

 

위와 같이 적용하면 Android OR IOS 모두 숫자키패드가 나옵니다.

 

또 한가지 팁 !!!

input 의 type 이 number 일때 maxlength를 설정하려고 하면 실제 화면에서는 maxlength 설정이 먹질 않는다.

간단한 스크립트 함수 선언으로 해결할 수 있다.

<input type="number" max="5" maxlength="4" oninput="maxLengthCheck(this)">

<script>
  function maxLengthCheck(object){
      if (object.value.length > object.maxLength){
          object.value = object.value.slice(0, object.maxLength);
      }
  }
</script>

감사합니다 ^^