JavaScript 익히기 #10 maxlength

Form에 value값을 submit 해주는 case를 실무에서 처리하는 과정에서

뷰에서 input 값에 대한 유효성 체크를 위해 해당 글자수를 제한하는 경우가 꽤 더러 있다.

위와 같이 연락처나 생년월일을 처리할때, 글자수 제한을 해줘야하는 경우가 있다.

일반적인 input에 해당 조건을 거는 경우는 다음과 같다.

<input type="text" placeholder="4자리만 입력하세요" maxlength="4"/>

다음과 같이 입력하면, text에 대한 최대 길이수 4만큼만 입력이 제한이 걸려준다. 하지만 위와 같은 케이스에 경우 text가 입력이 되지않고, 숫자만 입력하게끔 제한을 걸어주려면 type을 number로 바꿔야 하는데 이때 maxlength가 동작을 하지않는다.

<input type="number" placeholder="4자리만 입력하세요" maxlength="4"/>

-> 위와 같이 입력해도 동작을 하지 않는다. 이럴때는 javascript로 따로 input을 불러와 처리해주면 된다.

// javascript maxLengthCheck 함수
function maxLengthCheck(object) {
    if (object.value.length > object.maxLength) {
        object.value = object.value.slice(0, object.maxLength);
    }
}

JavaScript에서 value값 길이에 대한 체크 조건을 걸어준다.

<!-- html input값 처리 -->
<input type="number" oninput="maxLengthCheck(this)" placeholder="4자리만 입력하세요" maxlength="4"/>

이후 oninput을 통해 데이터를 입력(this)받았을때 해당 조건을 실행시켜주면 number type에서도 maxLength가 잘 작동하는 것을 확인할 수 있다.

소스코드