[javascript] input 입력 글자 수 제한

input 입력 글자 수 제한하기

 

 

input 박스로부터 값을 입력받아 db에 저장을 하게 되는데 그 data가 size가 제한되어 있다면 설정을 해줘야된다.

input type 입력 글자 수 제한하는 방법을 정리해본다.

 

 

 

---

 

먼저, input type이 text 일 떄를 보자 !

 

input type이 text일때는 maxlength의 값만 설정해주면 된다.

예시로. ID의 입력 값을 10으로 제한을 주고 싶을 때는 이렇게 해주면 된다. (간편하군~ :b)

<tr>
	<th>USER ID</th>
	<td><input type="text" maxlength="10" id="testId"></td>
</tr>

 

 

 

 

 

하지만 여기서 추가로 주의해야 할 점은 input type이 number일 때는 maxlength가 정상 작동하지 않는다. ㅠㅠ

 

 

input type이 number일 때는 따로 함수를 생성해서 추가해줘야된다.

생성해준 함수를 number type인 input에 oninput으로 호출해주면 설정 완료 -!!

<input type="number" maxlength="10" oninput="numberMaxLength(this);"/>

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