实时显示剩余可以输入的文字数

<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>