<div class="row">
<div class="col-md-8">
<div>
<textarea name="counttextarea" id="counttextarea" cols="45" rows="5" style=" 400px;padding: 10px; margin:10px;"></textarea>
</div>
<div>
<span name="countchars" id="countchars">100</span> Characters Remaining. <span name="percent" id="percent"></span>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
var totalChars = 100; // Total characters allowed in textarea
var countTextBox = $('#counttextarea'); // Textarea input box
var charsCountEl = $('#countchars'); // Remaining chars count will be displayed here
charsCountEl.text(totalChars); // initial value of countchars element
countTextBox.keyup(function() { // user releases a key on the keyboard
var thisChars = this.value.replace(/{.*}/g, '').length; // get chars count in textarea
var per = thisChars*100;
var value= (per / totalChars); // total percent complete
if(thisChars > totalChars){ // if we have more chars than it should be
var CharsToDel = (thisChars-totalChars); // total extra chars to delete
this.value = this.value.substring(0,this.value.length-CharsToDel); // remove excess chars from textarea
}else{
charsCountEl.text( totalChars - thisChars ); // count remaining chars
$('#percent').text(value +'%');
}
});
});
</script>