首页>>Jquery文字>>实时显示剩余可以输入的文字数(2014-10-14)

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

实时显示剩余可以输入的文字数
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script>  
  2. $(document).ready(function(){  
  3.     var totalChars      = 100; //Total characters allowed in textarea  
  4.     var countTextBox    = $('#counttextarea') // Textarea input box  
  5.     var charsCountEl    = $('#countchars'); // Remaining chars count will be displayed here  
  6.     charsCountEl.text(totalChars); //initial value of countchars element  
  7.     countTextBox.keyup(function() { //user releases a key on the keyboard  
  8.         var thisthisChars = this.value.replace(/{.*}/g, '').length; //get chars count in textarea  
  9.         var per = thisChars*100;   
  10.         var value= (per / totalChars); // total percent complete  
  11.         if(thisChars > totalChars) //if we have more chars than it should be  
  12.         {  
  13.             var CharsToDel = (thisChars-totalChars); // total extra chars to delete  
  14.             thisthis.value = this.value.substring(0,this.value.length-CharsToDel); //remove excess chars from textarea  
  15.         }else{  
  16.             charsCountEl.text( totalChars - thisChars ); //count remaining chars  
  17.             $('#percent').text(value +'%');  
  18.         }  
  19.     });   
  20. });  
  21. </script>  
XML/HTML Code
  1. <div class="row">  
  2. <div class="col-md-8"><div><textarea name="counttextarea" id="counttextarea" cols="45" rows="5" style="width: 400px;padding: 10px; margin:10px;"></textarea></div>  
  3. <div><span name="countchars" id="countchars">100</span> Characters Remaining. <span name="percent" id="percent"></span></div>  
  4. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_446.html