[Meta ESG] 현재 작성한 글자수 보여주기 기능 구현

Meta ESG 프로젝트 요건 중 특정 textarea에서 현재 작성한 글자수를 보여주는 기능이 있었다.

나는 onkeyup 이벤트 핸들러를 사용해 구현하였다.

---

HTML

  <div class="check-input-length">
    <div>
      <textarea id="newCommentContent" maxlength="500"></textarea>
    </div>
    <div>
      <div>
        <div>
          <span class="typing-num">0</span>
          <span>/</span>
          <span class="typing-max-num">500</span>
        </div>
        <div>
          <button onclick="writeComment(this)"><span>등록</span></button>
        </div>
      </div>
    </div>
  </div>

 

JS

$('.check-input-length').keyup(function (e) {
	let content = $(this).find('textarea').val();

	$(this).find('.typing-num').text(content.length);
});