Count Characters and Words In Text Fields - jQuery Counter.js

File Size: 14.2 KB
Views Total: 338
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Count Characters and Words In Text Fields - jQuery Counter.js

Counter.js is a lightweight yet powerful jQuery plugin that counts words or characters typed in various web elements including input fields, textareas, and content-editable elements. 

You can set the minimum and maximum goal for the counter, customizable the counter's feedback message, and even prevent users from further typing once the specified limit is reached.

How to use it:

1. Include the jquery.word-and-character-counter.min.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.word-and-character-counter.min.js"></script>

2. Apply the function to the target text fields and specify the maximum number of characters/words allowed to type.

// character counter
$("#example").counter({
  goal: 10, // default: 144
});

// word counter
$("#example").counter({
  type: 'word',
});

// countup instead of countdown
$("#example").counter({
  count: 'up',
});

3. Customize the feedback message.

$("#example").counter({

  // Provide translate text for counter message
  translation: "",

  // Custom counter message
  msg: "",
  
});

4. Customize the appearance of the character/word counter.

$("#example").counter({

  // Specify target for the counter
  target: false,

  // Append target, otherwise prepend
  append: true,

  // Custom counter container class
  containerClass: ""

});

This awesome jQuery plugin is developed by qwertypants. For more Advanced Usages, please check the demo page or visit the official website.