jQuery 글자수 세기 실습

13 Dec 2020 in Programming on JavaScript

◇ jQuery 실습 포스팅 시리즈 ◇

1. 이미지 한칸씩 앞당기기 실습
2. 마우스 on/off 실습
3. 야매 트위터 글자수 세기 실습 - 현재 글
4. jQuery CodePlayer 실습

• 간단한 실습 어게인..! 화면은 다음과 같은 코드로 구성된다.

  <div class = "wrapper">
      <h1>150</h1>
      <textarea cols = "70" rows="5"></textarea>
  </div>
  

• keyup 이벤트가 발생할 때 마다 글자수를 센다.

  • .on(‘keyup’,function A)을 사용해 keyup이 될 때 마다 function A 가 실행되게 한다.
  • function A 는 그냥 단순히 textarea의 글자수를 세서 h1 에 꽂아넣는 코드다.

  $(function(){
      $("textarea").on('keyup',function(){
          var textCount = $(this).val().length;
          var remain = 150-textCount;
          $('h1').html(remain);})
  })
  

간단스루~