JQuery设置栏位字数计算器

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