[Javascript] 자바스크립트 input type = "number"일 때 maxLength 적용하는 법

개요

input 태그에 type을 숫자로 설정하고, maxLength = {1}로 했는데 숫자를 계속 입력할 수가 있었다...

알고보니, maxLength는 최대 "문자" 길이이기 때문에  input type = "number"일 때는 적용되지 않는다...!

 

해결법

input 태그 안에 아래 코드를 넣어주면 해결된다..!

onInput={(e) => {
              if (e.target.value.length > e.target.maxLength)
                e.target.value = e.target.value.slice(0, e.target.maxLength);
            }}

 

maxLength보다 value가 크면 더 큰 부분을 잘라내는 코드다.

전체 input 태그를 보면 아래와 같다.

<input
   onInput={(e) => {
    if (e.target.value.length > e.target.maxLength)
    e.target.value = e.target.value.slice(0, e.target.maxLength);
   }}
   type="number"
   inputmode="decimal"
   min="0"
   max="9"
   maxLength={1}
   ></input>