[제이쿼리 jQuery] 글자수 제한 / 글자수 체크 / textarea 사이즈 조절 방지

 

안녕하세요!
디자인도 하고 개발도 하는 '디발자 뚝딱'입니다.

이번 포스팅에서는 자바스크립트/제이쿼리를 사용하여
위 이미지 우측 상단에 보이는 '0자/200자'처럼 글자수를 체크하는 기능을 공유하려고 합니다.
자소서 쓸 때 많이 봤던 그림이죠?
저 글자수 채우려고 얼마나 머리를 쥐어 짜냈었는지..ㅎㅎ
자, 각설하고!

 

요약하면 이렇습니다.
1. 타이핑이 될 때마다 글자수가 카운트 되게 한다.
2. 200자가 넘으면 타이핑이 되지 않도록 한다.

 

 

  html

textarea태그의 maxlenth 속성을 사용해서 글자수를 200으로 제한했습니다.
즉, 200자 이상 타이핑이 되지 않도록 하는 거죠.
+) 그리고 여기서 'resize: none'은 textarea의 사이즈가 조절되지 않도록 방지하는 코드입니다.

<div class="form-group col-12" >
  <div class="textLengthWrap">
    <p class="textCount">0자</p>
    <p class="textTotal">/200자</p>
  </div>
  <textarea style="height:300px; resize: none;" maxlength="200" placeholder="텍스트를 입력하세요.">
  </textarea>	
</div>

 

 

  js

제이쿼리 코드를 작성해놓았는데요.
주석을 보면서 차례대로 이해를 하시면 될 것 같습니다.

 

맨 첫째 줄을 보시면, keyup()을 사용하여 타이핑이 될 때마다 글자수를 체크하도록 했습니다.

 

여기서 .val()은 value의 약자인데요.
해당 textarea에 입력한 내용을 불러오는 코드입니다.
그래서 $(this).val()을 통해 해당 textarea의 값을 content라는 변수 안에 담아주는 거죠.

 

그 다음 .length(길이)로 해당 내용의 길이(글자수)를 체크합니다.
글자수가 0이면 '0자'가 출력 되고
그게 아니라면, 글자수 뒤에 '자'를 붙여서 보여지게 합니다.

 

그리고 '// 글자수 제한' 주석 아래에 있는 내용을 봐주세요.
html에서 maxlenth 속성을 사용하여 글자수를 제한할 수도 있지만,
여기에 보이는 코드처럼 substring()을 사용하여 글자수를 자를 수도 있으니 참고해 주세요!

 

또, 글자수가 200자가 넘으면 alert(알림창)을 띄워서
사용자에게 200자가 초과 됐다는 내용을 인지시켜주면 더 좋겠죠?

$('#textBox').keyup(function (e) {
	let content = $(this).val();
    
    // 글자수 세기
    if (content.length == 0 || content == '') {
    	$('.textCount').text('0자');
    } else {
    	$('.textCount').text(content.length + '자');
    }
    
    // 글자수 제한
    if (content.length > 200) {
    	// 200자 부터는 타이핑 되지 않도록
        $(this).val($(this).val().substring(0, 200));
        // 200자 넘으면 알림창 뜨도록
        alert('글자수는 200자까지 입력 가능합니다.');
    };
});