[HTML&CSS] input type number maxlength 적용하기

이 글은 input type이 text였을 때가 아닌 number인 상황이었을 때 maxlength가 작동하지 않는 점에 대해 작성했다.

text였다면 저 maxlength가 제대로 먹혔을 텐데..

아래 GIF 이미지와 같이 number로 설정했을 때 우측에 생기는 화살표로는 max와 min 속성이 제대로 작동하지만

사용자가 직접 입력했을 때는 먹히지 않는다.

maxlength도 마찬가지였다.

 

 

 

 

따라서 javascript나 jquery를 이용해서 사용자가 입력했을 때 maxLength 속성을 가져와

내가 입력한 길이와 비교해서 입력한 길이가 더 길면 maxLength까지 자르는 방식으로 처리한다.

 

 

<input id="${pageId}ppbFileCount" 
	name="${pageId}ppbFileCount" 
    class="form-control" 
    type="number" 
    maxlength="2" 
    placeholder="첨부파일 등록 갯수를 입력하세요" />

 

var $fileCountInput = $('input[name="${pageId}ppbFileCount"]');

$fileCountInput.on("input",function(event){
    var obj = event.target;
    if(obj.value.length > obj.maxLength){
        obj.value = obj.value.slice(0, obj.maxLength);
    }
});