JQuery Word Counter

The Simple Textarea jQuery word counter plugin this simple script will useful you to restrict the user to enter limited words inside the textarea like we have seen in twitter tweet box and many websites and you can also use this script custom websites and admin panel lets see the simple script

HTML

insert the text area box and give it name like word_count and insert one more tag as you like i just take span tag to display word count value i just give it name like display_count  see the bellow code for more view

<div id="container">
  
    <textarea name="word_count" id="word_count" ></textarea>
   
       
       <span style="color:#06F">Total word Count : <span id="display_count">0</span>
       
      
     
  </div>

jQuery 

in this section insert the jquery plugin in next step i just take the custom function name it like wordCount inside the function i just calling the fn method it is default method in jquery plugin and the wordConter is a variable to display the word counts

now take the keypress function inside this i am using regular expressions and assigning it to textbox length after complete the custom function of wordCount assign it to textbox we already named it like #word_count  see the last line of jquery code

<script type="text/javascript" src="jquery-1.12.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
 
 $.fn.wordCount = function(params){
 
 var text = {
  wordCounter:"display_count"
 };
 
 
 if(params) {
  this.extend(text, params);
 }
 
 
 this.keypress(function()
 { 
  total_words=this.value.split(/[\s\.\?]+/).length;
  
  $('#'+text.wordCounter).html(total_words);
  
 }); 
 
 
};
 
 
 
 $('#word_count').wordCount();
 
 
});
</script>

Live Demo   Download Script