[Java Script] input maxlength 안될때

`input[type="number"]`에서 maxlength 속성이 작동하지 않는 것은 브라우저의 기본 동작 때문이며, 이를 해결하려면 maxlength 대신 JavaScript를 사용하여 입력값의 길이(예: .value.length)를 제한하거나, input의 type을 text로 변경하고 pattern 속성으로 숫자만 입력하도록 제한하는 방법을 사용할 수 있습니다. 

 

해결 방법

1. JavaScript로 길이 제한하기:
   • input 태그의 type이 number일 때, maxlength 속성은 작동하지 않습니다.
   • 대신, JavaScript의 addEventListener를 사용하여 input 이벤트 발생 시 value.length를 확인하고, 최대 길이를 초과하면 입력값을 제한하는 로직을 구현할 수 있습니다. 
      

JavaScript

 

    const inputElement = document.getElementById('myInput'); // id가 myInput인 input 태그
    const maxLength = 8; // 원하는 최대 길이

    inputElement.addEventListener('input', function() {
      if (this.value.length > maxLength) {
        this.value = this.value.slice(0, maxLength); // 최대 길이를 넘으면 자르기
      }
    });

1. `type="text"`와 pattern 속성 사용하기:
   • input의 type을 text로 변경하고 maxlength 속성을 적용합니다. 
      
   • pattern 속성을 사용하여 숫자만 입력하도록 제한할 수 있습니다. 
      

코드

 

    <input type="text" maxlength="8" pattern="[0-9]*" placeholder="숫자 8자리 입력">

• 이 방식은 input이 숫자로만 입력되는 것을 보장하면서 maxlength 속성을 사용할 수 있게 해줍니다. 
   

주의사항

• `input[type="number"]`에서 maxlength가 작동하지 않는 이유는 브라우저별로 다르게 동작하기 때문입니다. 
   
• maxlength 속성은 textarea나 `type="text"`인 input 태그에서 잘 작동합니다. 
   

어떤 방법을 선택하든, `type="number"`의 경우 JavaScript를 사용하여 값을 제한하는 것이 가장 확실한 방법입니다.