[JavaScript]Input type number의 maxlength 적용(slice 메서드)

 

HTML에서 input 태그의 타입 중 하나인 number 타입을 사용할 때
maxlength 속성을 이용하여 입력 가능한 숫자의 수를 정하려고 하지만,
적용이 잘 되지 않았습니다.

 

검색을 해보니 input type='number'의 경우
maxlength가 작동되지 않는 사례를 발견할 수 있었고,
해결방법 또한 알 수 있었습니다.

 

 

 

 

해결 방안

---

바로 JavaScript를 이용하여 입력 글자의 수를 조절할 수 있습니다. 아래는 number 타입의 input 태그입니다.

<input type="number" maxlength="8"/>

maxlength는 8로 설정하였지만 그 이상 입력되는 게 문제입니다.

 

이럴 경우 JavaScript를 사용하여 해결할 수 있는데, 아래와 같이 input 태그에 oninput을 할 경우 연결할 메서드를 선언 합니다.

<input type="number" maxlength="8" oninput="maxLengthChk(this)"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
	
  function maxLengthChk(object){
    if (object.value.length > object.maxLength){
      object.value = object.value.slice(0, object.maxLength);
    }    
  }
  
</script>

 

 

 

 

 

 

코드 분석

---

<input type="number" maxlength="8" oninput="maxLengthChk(this)"/>

타입이 "number"인 input 태그에 maxlength="8" 속성을 추가해 8자리까지 입력 가능하게 선언합니다.
또한, oninput시 발생할 메서드인 maxLengthChk(this)를 선언합니다.

 

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

스크립트가 선언된 부분에 input 태그에 명시한 maxLengthChk메서드를 생성합니다.

 

object.value.length > object.maxLength

위 코드를 통해 input 태그의 입력된 값의 길이와 선언된 최대 허용 길이수를 비교하게 됩니다.

 

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

위 코드를 통하여 입력된 값의 길이가 더 클 경우 slice메서드를 사용하여 잘라내어 나타내게 됩니다.

 

 

위에서는 oninput 이벤트를 사용하였지만, 상황에 따라 onclick 등의 이벤트를 사용하는 방법도 고려할 수 있습니다.