입력 필드 글자수 카운팅과 입력 길이 제한

이벤트 리스너를 이용하면 입력 필드(input/>), 또는 텍스트 영역(<textarea></textarea>)  입력하는 내용을 감시해 글자수를 제한할 수 있습니다.

폼(Form)을 사용하면 아이디 길이, 이름 길이, 전화번호 길이, 우편번호 길이, 리뷰 글자수 제한 등 여러가지 요소의 입력 길이 제한이 필요한 경우가 있습니다.

예를 들어 이용 후기 글을 작성하는 텍스트 영역의 글자수를 100자로 제한하는 경우, 이벤트 리스너를 이용해 텍스트 영역의 글자수를 제한해보겠습니다.

let maxlength = 100;
document.getElementById('review').addEventListener('keydown',function(e){// 키다운 이벤트 리스너 등록
    let lengthCheckRegEx = new RegExp('^.{'+maxlength+',}$');
    if(lengthCheckRegEx.test(e.target.value)){//정규표현식 test 메서드로 최대길이 이상인지 체크
        //최대 길이 초과 차단
        e.target.value = e.target.value.substr(0,maxlength);// 최대 글자수만큼 잘라냄
        console.log(e.target.value);
    }
});

핵심은 정규표현식으로 최대 길이 이상인지 테스트를 해서 맞는지를 확인하는 방법입니다.

최대 길이를 체크하는 것은 여러가지 방법으로 구현이 가능하지만, 조금 고급스러운 방법을 사용했습니다.

그냥 단순하게 

if(e.target.value.length > maxlength){

이런 방법으로 문자열 길이 체크를 해도 됩니다.

입력하는 글자수를 표시해서 내용을 입력하는 사용자에게 안내를 할 필요가 있으면

e.target.value.length

이 값을 적당한 입력 필드 값에 대입을 해주면 됩니다.