[HTML,CSS]HTML5 input type maxlength속성

만약 전화번호 입력 칸 같은 경우 

010-0000-0000
2,3번째 input 태그 안에는 4글자 제한이 필요하다

라는 경우에 사용하는 게 input에 maxlength 속성이 있다.

 

아래와 같이 사용한다.

<input type="text" name="input_tel2" maxlength="4">

하지만 전화번호 같은 경우 숫자만와야하니 type을 Number 변경한다

<input type="Number" name="input_tel2" maxlength="4">

이경우 maxlength가 작동되지 않고 제한을 넘어간다.

 

type="Number"인 경우 maxlength를 사용할 수 없다

 

javascript로 처리하게 된다.

<input type="Number" name="input_tel2" maxlength="4" oninput="maxLength(this)">

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