[HTML] input 태그 타입이 number일 경우 maxlength 적용하기

 

 

자바스크립트 미니 게임을 만들던 중 type이 number인 input태그에 maxlength가 크롬에서 적용이 안되는 것을 깨달았다.

찾아보니 해결 방법은 2가지 정도.

 

 

1. max, min 속성을 이용하는 방법

 

양수인 경우에는 min 값을 0으로 설정하고, max 값을 원하는 길이만큼 9를 써주어 0부터 999999... 까지 입력 가능하게 한다.

예를 들어 4자리인 경우에는 9999, 5자리인 경우에는 99999와 같이 써주면 된다.

 

<input type="number" maxlength="5" min="0" max="99999"
<input type="number" maxlength="5" min="-99999" max="99999">

 

 

하지만 이 방법의 경우 컨트롤 버튼으로 올리고 내릴 때만 작동한다.

 

 

2. oninput 이벤트를 이용하는 방법

 

<input type="number" oninput="checkMaxLength(this)">

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

 

 

* 참고

type - textbox html