This time I will share jQuery Plugin and tutorial about Simple jQuery Word and Character Counter For Text Box – Word Counter, hope it will help you in programming stack.
Word Counter is a minimal jQuery script that adds a simple inline word and character counter to your textarea element.
How to use it:
1. Create a word and character counter next to your textarea element.
1 |
<textarea name="textCount" id="textCount"></textarea> |
2 |
<p>You have <span id="wordCount">0 words</span> and <span id="charCount">0 characters</span></p> |
2. Add the necessary jQuery library to your webpage.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
3. The core function for the Word and Character Counter.
07 |
this.textbox = $("#textCount"); |
08 |
this.wordCount = $("#wordCount"); |
09 |
this.charCount = $("#charCount"); |
12 |
this.textbox.on("input", this.count.bind(this)); |
15 |
var words = this.textbox.val().split(" "), |
16 |
chars = this.textbox.val(); |
19 |
for (var i = 0; i < words.length; i++) { |
20 |
while (words[i] === "") { |
25 |
if (words.length === 1) { |
26 |
this.wordCount.text(words.length + " word"); |
28 |
this.wordCount.text(words.length + " words"); |
31 |
if (chars.length < 0) { |
33 |
} else if (chars.length === 1) { |
34 |
this.charCount.text(chars.length + " character"); |
36 |
this.charCount.text(chars.length + " characters"); |
4. Initialize the Word and Character Counter.
This awesome jQuery plugin is developed by ChynoDeluxe. For more Advanced Usages, please check the demo page or visit the official website.
