[jquery] textarea 글자수 제한 및 글자수 감지

완성된 형태이다.

첫부분에 타임리프 구문이 있어서 햇갈릴수도 있지만 html코드만 보면된다.
단순한 댓글창 형태이다.

   <div class="comment-box">
            <div id="comment-box-title">
                <span>댓글</span>
                <span>([[${dto.replyCount}]])</span>
            </div>
            <div id="comment-box-form">
                <div id="comment-form">
                    <input sec:authorize="isAuthenticated()" class="security" type="hidden" th:value="${#authentication.principal.username}"/>

                    <textarea sec:authorize="isAnonymous()" id="comment-content-login" class="comment-content" name="content" rows="5", placeholder="로그인을 해주세요."></textarea>

                    <textarea  sec:authorize="isAuthenticated()" class="comment-content" name="content" rows="5", placeholder="댓글을 입력하세요."></textarea>

                    <div class="comment-form-wrap" >
                        <span class="starrr" id="comment-star"></span>

                        <span class="length">
                            <span class="comment_length">0</span>
                            / 500
                        </span>

                    <button id="comment-btn" class="btn btn-success">등록</button>
              </div>
          </div>
      </div>
 </div>

이렇게 만든 댓글창에 아래와 같이 js를 달아주면 
글자수 감지 및 글자수 제한을 할 수 있는 textarea가 완성된다 .~

   // 댓글 글자수 감지
  $(".comment-content").keyup(function (e){
    var content = $(this).val();

    //글자수 세기
    if(content.length == 0 || content == ""){
        $(".comment_length").text('0');
    }else{
        $(".comment_length").text(content.length);
    }

    if (content.length > 500) {
    // 500자 부터는 타이핑 되지 않도록
    $(this).val($(this).val().substring(0, 200));
    // 500자 넘으면 알림창 뜨도록
  };