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

 

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. 입력된 글자수를 체크로직 구현하기

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

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

(HTML, JS 탭을 클릭하여 두 소스를 모두 확인하세요)

 

 < HTML > 

숫자를 입력할 수 있는 'type'이 'number'인 input이 있고,

여기에 'oninput' 입력 이벤트가 발생하면

'handleOnInput' 함수가 호출됩니다.

이때, 첫번째 파라미터로 이벤트가 일어난 element, 즉, input element가 전달이되고,

두번째 파라미터로 최대 입력 글자 길이(5)가 전달됩니다.

 

 < JS > 

입력창에 oninput 이벤트가 발생할 때마다 호출되는 이 함수는

입력창에 입력된 숫자의 길이가 두번째 파라미터로 입력받은 maxlength보다 크면

입력된 값을 5자리까지 잘라서 입력창의 value값으로 넣어줍니다.

이때 문자열을 5자리까지 잘라주기 위해서 substr 함수를 사용하였습니다.

 

substr() 함수의 사용법 및 기타 문자열을 자르는 방법은 아래의 포스팅을 참조하세요.

[Javascript] substr(), substring(), slice() 비교

[Javascript] substr(), substring(), slice() 비교

 

---

 

input에서 입력 글자수를 제한하는 방법을 알아보았습니다.