Customized jQuery word and text counter for a text box is such a time-saving plugin. jQuery text and word counter rid of your problem to remember the word count of your articles and document in a text box. While typing in the field box, a user can visualize the word and character count of their docs as well as one more imperative aspect to check the remaining character left to be typed in the text and input area.
Table of Contents
More features:
- Allow with min/max goal for the counter.
- Fully configurable counter styles and text.
- Fully configurable error styles and text.
- Stops typing if maximum reached.
- Useful callback functions.
Install it via package managers:
# NPM
$ npm install jquery-text-counter
# Bower
$ bower install jquery-text-counter
How to use it:
1. Load the core JavaScript file textcounter.js after the latest version of jQuery library and the text counter
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="textcounter.js"></script>
2. Call the function textcounter() to create a default character counter next to the invoked text field.
$('input, textarea').textcounter();
3. Create a word counter instead of character counter.
$('input, textarea').textcounter({
type: "word"
});
4. Countdown from maximum characters/words rather than counting up:
$('input, textarea').textcounter({
max: 140,
countDown: true
});
5. All default configuration options:
$('input, textarea').textcounter({
// "character" or "word"
'type' : "character",
// minimum number of characters/words
'min' : 0,
// maximum number of characters/words
// -1 for unlimited, 'auto' to use maxlength attribute
'max' : 200,
// custom attribute name with the counter limit if the max is 'autocustom'
'autoCustomAttr' : "counterlimit",
// HTML element to wrap the text count in
'countContainerElement' : "div",
// class applied to the countContainerElement
'countContainerClass' : "text-count-wrapper",
// class applied to the counter message
'textCountMessageClass' : "text-count-message",
// class applied to the counter length
'textCountClass' : "text-count",
// error class appended to the input element if error occurs
'inputErrorClass' : "error",
// error class appended to the countContainerElement if error occurs
'counterErrorClass' : "error",
// counter text
'counterText' : "Total Count: %d",
// error text element
'errorTextElement' : "div",
// error message for minimum not met,
'minimumErrorText' : "Minimum not met",
// error message for maximum range exceeded,
'maximumErrorText' : "Maximum exceeded",
// error class appended to the input element if error occurs
'inputErrorClass' : "error",
// error class appended to the countContainerElement if error occurs
'counterErrorClass' : "error",
// counter text
'counterText' : "Total Count: %d",
// error text element
'errorTextElement' : "div",
// error message for minimum not met,
'minimumErrorText' : "Minimum not met",
// error message for maximum range exceeded,
'maximumErrorText' : "Maximum exceeded",
// display error text messages for minimum/maximum values
'displayErrorText' : true,
// stop further text input if maximum reached
'stopInputAtMaximum' : true,
// count spaces as character (only for "character" type)
'countSpaces' : false,
// count from maximum characters/words
'countDown' : false,
// count down text
'countDownText' : "Remaining: %d",
// count extended UTF-8 characters as 2 bytes (such as Chinese characters)
'countExtendedCharacters' : false,
// count carriage returns/newlines as 2 characters
'twoCharCarriageReturn' : false,
// display text overflow element
'countOverflow' : false,
// count overflow text
'countOverflowText' : "Maximum %type exceeded by %d",
// class applied to the count overflow wrapper
'countOverflowContainerClass' : "text-count-overflow-wrapper",
// maximum number of characters/words above the minimum to display a count
'minDisplayCutoff' : -1,
// maximum number of characters/words below the maximum to display a count
'maxDisplayCutoff' : -1,
});
