<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>
감사합니다 ^^
