HTML設定顯示計算字數

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h3>Textarea  CountDown 在輸入欄位設置字數計算器</h3>
      <h4>倒數可輸入字數號碼</h4>
      <form action="">
        <div class="form-group row">
          <div class="col-md-4">
            <label for="firstName">First Name </label>
            <input type="text" class="form-control" id="firstName" placeholder="Please enter first name">
          </div>
          <div class="col-md-4">
            <label for="firstName">Middle Name </label>
            <input type="text" class="form-control" id="firstName" placeholder="Please enter middle name">
          </div>
          <div class="col-md-4">
            <label for="firstName">Last Name </label>
            <input type="text" class="form-control" id="firstName" placeholder="Please enter last name">
          </div>
         </div>
         <div class="form-group row">
           <div class="col-md-6">
              <label for="firstName">Age </label>
              <input type="text" class="form-control" id="firstName" placeholder="Please enter age">
           </div>
           <div class="col-md-6">
              <label for="firstName">Sex </label>
              <input type="text" class="form-control" id="firstName" placeholder="Please enter sex">
           </div>
         </div>
         <div class="form-group inputCount">
           <label for="inputprdDesc">Content</label>
           <div class="count">0</div>
           <textarea name="" id="inputprdDesc" cols="30" rows="5" class="form-control" placeholder="please enter content"></textarea>
         </div>
       </form>
    </div>
  </div>
</div>

CSS設定樣式

label{
  display: inline-block;
  float: left;
}
.count,.countDown{
  font-size: 1em;
  text-align: right;
}
.countBelow{
  color: #ff0000;
  font-weight: bold;
}

設定JQuery倒數計數器

var countMax = 120,
    countThis = $('.inputCount');

countThis.find('.count').text(countMax);

countThis.find('textarea').on('keydown keyup keypress change',function(){
  var thisValueLength = $(this).val().length,
      countDown = countMax-thisValueLength;
  countThis.find('.count').text(countDown);
  
  if(countDown < 0){
    countThis.find('.count').addClass('countBelow');
  } else{
    countThis.find('.count').removeClass('countBelow');
  }
});

範例網址
https://codepen.io/amanda328/pen/aammmq?editors=0010