[TIL] input 에서 입력 글자수 제한하는 2가지 방법

Yuri Lee·2021년 9월 15일

Intro

input 에 대한 글자수 validation 를 설정해야 했다. 예를 들어 input 에 검색할 수 있는 최대 글자를 50이라고 가정했을 때 50이상의 글자가 입력될 경우 제한하는 것이다.

Javascript의 input 폼에 입력되는 최대 글자수를 제한하는 방법 2가지가 있다.

maxlength 속성 사용하기

입력된 글자수를 체크로직 구현하기

<input type='text' maxlength='5' />

maxlength 속성을 지정하여 최대 입력 글자수를 제한할 수 있다. 다음의 예시는 최대 5글자까지만 입력한 것이다.
하지만 이 방법은 input의 type이 'text, search, url, tel, email, password' 일 경우에만 작동한다. type이 'number'일 경우에는 작동하지 않는다.
따라서, type이 'number'인 경우에는 2번 방법을 사용해야 한다.

<input 
       type='number' 
       oninput='handleOnInput(this, 5)'
/>

숫자를 입력할 수 있는 'type'이 'number'인 input이 있고, 여기에 'oninput' 입력 이벤트가 발생하면 'handleOnInput' 함수가 호출된다.
첫번째 파라미터로 이벤트가 일어난 element, 즉, input element가 전달이되고, 두번째 파라미터로 최대 입력 글자 길이(5)가 전달된다.

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

입력창에 oninput 이벤트가 발생할 때마다 호출되는 이 함수는 입력창에 입력된 숫자의 길이가 두번째 파라미터로 입력받은 maxlength보다 크면 입력된 값을 5자리까지 잘라서 입력창의 value값으로 넣어준다.
이때 문자열을 5자리까지 잘라주기 위해서 substr 함수를 사용한다.

const str = 'Mozilla';

console.log(str.substr(1, 2));
// expected output: "oz"

console.log(str.substr(2));
// expected output: "zilla"

Step by step goes a long way ✨