jQuery 연습문제 2 ( 동적으로 글자 수 세기 )

• 동적으로 글자 수 세기

<h3>동적으로 글자 수 세기</h3>
<div>
  <p><span id="counter">0</span>/150</p>
  <textarea id="input-content" rows="5" cols="50" style="resize: none"></textarea>
</div>

// 동적으로 글자 수 세기
$("#input-content").on("input", function(){

  // 1. 입력한 글자 수만큼 span 태그 값 변경
  let length = $(this).val().length;
  
  $("span").text(length);
  
  // 2. #counter의 글자색 변경
  // 글자 수가 0 ~ 130자 -> 검은색
  // 131 ~ 149 -> 주황색
  // 150 -> 빨간색
  if(length <= 130){
     $("#counter").css("color", "black");
  } else if(length <= 149){
       $("#counter").css("color", "orange");
    } else{
        $("#counter").css("color", "red");
        
        // 3. 150자 이상 작성 불가
        // 1) textarea에 작성된 값(문자열)을 변수에 저장
        const str = $(this).val();
        
        // 2) substring을 이용해서 글자를 150자 까지만 잘라내기
        // 문자열.substring(시작인덱스, 종료인덱스[미포함])
        str.substring(0,150);
        
        // 3) 150자 까지만 잘라내어 textarea의 값으로 세팅
        $(this).val(str.substring(0,150));
        // 151번째 글자의 입력이 인식되면 150자로 자름
        // 자르기 전에 글자 수를 먼저 카운트하여
        // 151로 보이는 문제가 발생
        
        $("#counter").text(150);
      }
})

See the Pen 24-12-25 jquery pr2 by Namu (@Namu-the-sans) on CodePen.