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

Intro

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

How to do

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

1. maxlength 속성 사용하기
2. 입력된 글자수를 체크로직 구현하기

1. maxlength 속성 사용하기

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

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

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 함수를 사용한다.

String.prototype.substr()

const str = 'Mozilla';

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

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

https://hianna.tistory.com/435
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substr