HTML input 태그 maxlength 설정

<input type="text" maxlength="6">

input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다.

 

하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다.

 

let numberMaxLengthCheck = function(obj){
    if(obj.value.length > obj.maxLength){
        obj.value = obj.value.slice(0, obj.maxLength);
    }
};

// HTML
<input type="number" maxlength="6" oninput="numberMaxLengthCheck(this)">

 

obj.value = obj.value.slice(0, obj.maxLength);

oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다.

numberMaxLengthCheck 에서는 input 태그 value 값의 길이가 maxlength 값 길이보다 클 경우

slice 함수를 통해 0번째 index 부터 입력 전 최대길이의 데이터까지 다시 input 태그에 담아준다.

이렇게 되면 길이가 넘어가는 값은 입력되지 않는다.

 

 

slice 함수는 아래와 같다.