[#. JavaScript] input maxlength 글자수 제한하기

 

 

 

 

 

input에 입력하는 텍스트 길이를 제한하려고 한다

2가지 방법에 대해 알아보자

 

 

 

① maxlength 사용하기

 

⑴ HTML

 

<input type="text" placeholder="텍스트" maxlength="6" />

 

간단하다

하지만 아래와 같이 숫자가 먼저 올 때는 maxlength 제한이 어렵다

 

 

 

 

 

② function 생성하기

 

입력한 텍스트가 maxlength를 넘었을 때 뒤에 오는 텍스트는 잘라서 다시 value값으로 넣는 function을 사용한다

 

⑴ HTML

 

<input type="text" placeholder="텍스트" maxlength="6" oninput="handleInputLength(this, 6)" />

 

 

⑵ JS

 

function handleInputLength(el, max) {
  if(el.value.length > max) {
    el.value = el.value.substr(0, max);
  }
}