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