jQuery Text Counter Plugin
A jQuery plugin for counting and limiting characters/words on text input, or textarea, elements.
Installation
Include script after the jQuery library:
or
npm
Install using npm:
npm install jquery-text-counter
or
Bower
Install using bower:
bower install jquery-text-counter
Usage
Basic usage (view editable code):
;
Define maximum words and allow further input (view editable code):
;
Define minimum characters and set custom countDownText
(view editable code):
;
Example
Elements
By default the plugin creates and appends the following element after the input:
Total Count: 0
If an error is present it is appended within the element. The input gains the inputErrorClass
and count wrapper gains the counterErrorClass
as defined in the options:
Total Count: 0 Error message text
Callbacks
maxcount(el){}
Fires when a counter reaches the maximum word/character count.
mincount(el){}
Fires when a counter reaches the minimum word/character count.
init(el){}
Fires after the counter is initialized.
maxunder(el){}
Fires when counter is under max limit.
minunder(el){}
Fires when counter is under min limit.
Options
type : "character" // "character" or "word"min : 0 // minimum number of characters/wordsmax : 200 // maximum number of characters/words, -1 for unlimited, 'auto' to use maxlength attribute, , 'autocustom' to use a custom attribute for the length (must set "autoCustomAttr")autoCustomAttr : "counterlimit" // custom attribute name with the counter limit if the max is 'autocustom'countContainerElement : "div" // HTML element to wrap the text count incountContainerClass : "text-count-wrapper" // class applied to the countContainerElementtextCountMessageClass : "text-count-message" // class applied to the counter messagetextCountClass : "text-count" // class applied to the counter length (the count number)inputErrorClass : "error" // error class appended to the input element if error occurscounterErrorClass : "error" // error class appended to the countContainerElement if error occurscounterText : "Total Count: %d" // counter texterrorTextElement : "div" // error text elementminimumErrorText : "Minimum not met" // error message for minimum not met,maximumErrorText : "Maximum exceeded" // error message for maximum range exceeded,displayErrorText : true // display error text messages for minimum/maximum valuesstopInputAtMaximum : true // stop further text input if maximum reachedcountSpaces : false // count spaces as character (only for "character" type)countDown : false // if the counter should deduct from maximum characters/words rather than counting upcountDownText : "Remaining: %d" // count down textcountExtendedCharacters : false // count extended UTF-8 characters as 2 bytes (such as Chinese characters)twoCharCarriageReturn : false // count carriage returns/newlines as 2 characterscountOverflow : false // display text overflow elementcountOverflowText : "Maximum %type exceeded by %d" // count overflow textcountOverflowContainerClass : "text-count-overflow-wrapper" // class applied to the count overflow wrapperminDisplayCutoff : -1 // maximum number of characters/words above the minimum to display a countmaxDisplayCutoff : -1 // maximum number of characters/words below the maximum to display a count // Callback API{} // Callback: function(element) - Fires when counter is under max limit{} // Callback: function(element) - Fires when counter is under min limit{} // Callback: function(element) - Fires when the counter hits the maximum word/character count{} // Callback: function(element) - Fires when the counter hits the minimum word/character count{} // Callback: function(element) - Fires after the counter is initially setup
Development
- Source hosted at GitHub
- Report issues, questions, feature requests on GitHub Issues
Authors
Contributors
- stgeneral - count length newlines fix
- moinism - callback API
- benr77 - bower support
- SammyB - countdown starting count fix
- eprincen2 - jQuery Validate compatibility fix
- Hexodus - minunder/maxunder events
- juliovedovatto / alvaro-canepa - multiple classes support for counter container
- dtipson - multiple classes error fix
- jmichalicek - count carriage returns/newlines as 2 characters
- diptopol -
stopInputAtMaximum
withtwoCharCarriageReturn
count fix, trimmed newline calculation fix, maximum text reached condition fix, text count overflow notification - trevorloflin -
minDisplayCutoff
andmaxDisplayCutoff
options - t3mujin - autocustom support (maxlength workaround), text fixes
- goranmiric - accessibility enhancements