JQuery Word Counter | Lessoncup Programming Blog

Monday, 20 June 2016

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

1 comment :

  1. Now this jquery word counter will be very useful to a lot of us. I really don't understand why twitter has limited character when tweeting and how best essays I've ever ordered also has limited words when submitted to me.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons