html jQuery的で入力文字数をカウント

Posted 2021-05-11

//指定した文字数になると数字の色が変わる

//javascript
$(function () {
  $("textarea").keyup(function(){
    var counter = $(this).val().length;
    $("#countUp").text(counter);
    if(counter == 0){
      $("#countUp").text("0");
    } 
    if(counter >= 10){
      $("#countUp").css("color","red");
    } else {
      $("#countUp").css("color","#666");
    }
  });
});


//html
<p>10文字まで入力できます。</p>
<textarea cols="30" rows="10"></textarea>
<p id="countUp">0</p>