[jQuery] textarea 글자 수 count / keyup event

natrue 2021. 5. 17. 14:25

728x90

keypress event	입력할 수 있는 키보드를 눌렀을때 실행 (한글 x, 영문 o)
keyup event	누른 키에서 손을 뗄 때 실행.
keydown event	키보드에 어떠한 키가 눌려도 실행

textarea 글자 수를 count 하기위해서 keyup event 사용.

<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
    width: 300px;
    height: auto;
    position: relative;
    display: inline-block;
}
.wrap textarea {
    width: 100%;
    resize: none;
    min-height: 4.5em;
    line-height:1.6em;
    max-height: 9em;
}
.wrap span {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
#counter {
  background:rgba(255,0,0,0.5);
  border-radius: 0.5em;
  padding: 0 .5em 0 .5em;
  font-size: 0.75em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
  $('#content').keyup(function (e){
    var content = $(this).val();
     // CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정한다.
      $(this).height(((content.split('\n').length + 1) * 1.5) + 'em');
      $('#counter').html(content.length + '/600');
    });
  $('#content').keyup(); // 처음 세팅 
});
</script>
</head>
<body>
<div class="wrap">
  <textarea id="content" maxlength="300"></textarea>
  <span id="counter"></span>
</div>
</body>
</html>

참고 : https://zinee-world.tistory.com/237

저작자표시 (새창열림)