Display Word and Character Count With Remaining Word / Character Left in jQuery

442

Display Word and Character Count With Remaining Word / Character Left in jQuery
In this post I’ll show how to quickly display Word and Character count while typing in textarea with limit validation which help to validate the max number of characters and words to be entered. For adding this feature on website I am going to use JQuery Character and Word counter plugin (jquery.word-and-character-counter.js).This plug-in allows you to count characters or words, up or down. You can set a minimum or maximum goal for the counter to reach.

Features

  • Create a custom message for your counter’s message
  • Force character/word limit on user to prevent typing
  • Works against copy/paster’s!

Integrate JQuery Character and Word counter plugin in your project

See the below example i am going to create a simple textarea to count characters and words with remaining words and character count.

Libraries

Include latest jQuery library after that add jquery.word-and-character-counter.js on page which you need to display words and character count.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.word-and-character-counter.min.js"></script>

HTML

Create a textarea

<textarea rows="6" cols="50" placeholder="Start Typing.." class="counter"></textarea>

JS

Display Character Count
The most basic way to use the counter is to simply call the counter() method on a jQuery object.

$(function() {   
  $(".counter").counter();
});

Display Word Count
Since by default this plugin counts characters, you have to set the type option to word like so:

$(function() {   
  $(".counter").counter({type: 'word',goal: 20});
});

See live demo and download source code.

DEMO | DOWNLOAD

In above example i just display basic use of JQuery Character and Word counter plugin you can Visit official page for more demos and documentation.